vue#CreateElement TypeScript Examples

The following examples show how to use vue#CreateElement. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: uplot-vue-example.tsx    From uplot-wrappers with MIT License 5 votes vote down vote up 
App = Vue.extend<
    {options: uPlot.Options, data: uPlot.AlignedData, target: HTMLElement},
    {onCreateFromTemplate: (chart: uPlot) => void, onDeleteFromTemplate: (chart: uPlot) => void},
    Record<string, never>, Record<string, never>
>({
    name: 'UplotVueExample',
    components: {uplotvue: UplotVue},
    // @ts-ignore
    data() {
        return {
            options: {
                title: 'Chart', width: 400, height: 300,
                series: [{
                    label: 'Date'
                }, {
                    label: '',
                    points: {show: false},
                    stroke: 'blue',
                    fill: 'blue'
                }],
                plugins: [dummyPlugin()],
                scales: {x: {time: false}}
            },
            target: null as unknown as HTMLElement
        };
    },
    beforeMount() {
        // Initialize data inside mounted hook, to prevent Vue from adding watchers, otherwise performance becomes unbearable
        this.data = [[...new Array(100000)].map((_, i) => i), [...new Array(100000)].map((_, i) => i % 1000)];
    },
    mounted() {
        this.target = this.$refs.root as HTMLElement;
        setInterval(() => {
            const options = {
                ...this.options,
                title: (this.$refs.root as HTMLElement).id ? 'Rendered with template' : 'Rendered with function'
            };
            const data: uPlot.AlignedData = [
                [...this.data[0], this.data[0].length],
                [...this.data[1], this.data[0].length % 1000]
            ];
            this.data = data;
            // Since we disabled reactivity for data above
            this.$forceUpdate();
            this.options = options;
        }, 100);
    },
    methods: {
        onCreateFromTemplate(/* chart: uPlot */) {
            console.log('Created from template');
        },
        onDeleteFromTemplate(/* chart: uPlot */) {
            console.log('Deleted from template');
        }
    },
    render(h: CreateElement): VNode {
        // @ts-ignore
        return (<div ref='root'>
            <UplotVue
                // @ts-ignore
                key="render-key"
                // @ts-ignore
                options={this.options}
                data={this.data}
                // Uncomment the line below to use predefined target
                // target={this.target}
                onDelete={(/* chart: uPlot */) => console.log('Deleted from render function')}
                onCreate={(/* chart: uPlot */) => console.log('Created from render function')}
            />
        </div>);
    }
})
Example #2
Source File: TaskTitle.ts    From vscode-todo-md with MIT License 5 votes vote down vote up 
// ──────────────────────────────────────────────────────────────────────
	render(h: CreateElement) {
		const returnEl = h('span', {}, []);
		const words = this.stuff.split(' ');

		const currentWords = [];

		for (const word of words) {
			if (
				word.length > 1 &&
				(word[0] === '#' || word[0] === '+' || word[0] === '@')
			) {
				const currentWordsAsText = `${currentWords.join(' ')} `;
				currentWords.length = 0;
				returnEl.children?.push(h('span', {
					domProps: {
						innerHTML: marked(currentWordsAsText),
					},
				}));

				let style;
				if (word[0] === '#') {
					style = this.styleForTag(word.slice(1));
				}

				returnEl.children?.push(h('span', {
					class: word[0] === '#' ? 'task__tag' : word[0] === '+' ? 'task__project' : 'task__context',
					style,
					domProps: {
						innerText: word,
					},
					on: {
						click: this.updateFilterValue,
					},
				}));

				returnEl.children?.push(h('span', ' '));
			} else {
				currentWords.push(word);
			}
		}

		const currentWordsAsText = currentWords.join(' ');

		returnEl.children?.push(h('span', {
			domProps: {
				innerHTML: marked(currentWordsAsText),
			},
		}));

		return returnEl;
	}
Example #3
Source File: Data.ts    From x5-gmaps with MIT License 5 votes vote down vote up 
public render(h: CreateElement): VNode {
    return h('div', this.$slots.default);
  }
Example #4
Source File: InfoWindow.ts    From x5-gmaps with MIT License 5 votes vote down vote up 
public render(h: CreateElement): VNode {
    return h('div', this.$slots.default);
  }