vue#createVNode TypeScript Examples

The following examples show how to use vue#createVNode. 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: index.ts    From elenext with MIT License 6 votes vote down vote up 
createSvgIcon = (compName: string, className: string, svgSource: string) => {
  const Icon = defineComponent({
    name: compName,
    props: { spin: Boolean },
    setup(props, { attrs }) {
      injectCss(injectCssId, iconStyles, true)

      return () =>
        createVNode('i', {
          ...attrs,
          class: {
            'el-icon': true,
            [`el-icon-${className}`]: true,
            'el-icon-spin': props.spin
          },
          innerHTML: svgSource
        })
    }
  })

  Icon.install = (app: App): void => {
    app.component(compName, Icon)
  }
  return Icon
}
Example #2
Source File: custom-tooltip.ts    From S2 with MIT License 6 votes vote down vote up 
renderContent() {
    // 配置级 s2.options.tooltip.content = ''
    const { tooltip } = this.spreadsheet.options;
    // 方法级 s2.showTooltip({ content: '' })
    const showOptions = this.options;
    const cell = this.spreadsheet.getCell(
      showOptions.event?.target as EventTarget,
    );
    // 优先级: 方法级 > 配置级, 兼容 content 为空字符串的场景
    const content = showOptions.content ?? tooltip?.content;

    const tooltipProps: TooltipRenderProps<TooltipShowOptions['content']> = {
      ...showOptions,
      cell,
      content,
    };

    const tooltipVNode = createVNode(
      TooltipComponent,
      tooltipProps as VNodeProps,
    );

    // render(null) 确保每一次的 tooltip 内容是最新的
    render(null, this.container);
    render(tooltipVNode, this.container);
  }
Example #3
Source File: utils.ts    From vue-i18n-next with MIT License 6 votes vote down vote up 
export function createTextNode(key: string): any {
  return !__BRIDGE__
    ? createVNode(Text, null, key, 0)
    : createVNodeVue2Compatible(key)
}
Example #4
Source File: composer.test.ts    From vue-i18n-next with MIT License 6 votes vote down vote up 
describe('__transrateVNode', () => {
  test('basic', () => {
    const composer = createComposer({
      locale: 'en',
      messages: {
        en: {
          hello: 'hello, {name}!'
        }
      }
    })
    expect(
      (composer as any)[TransrateVNodeSymbol]('hello', {
        name: createVNode(Text, null, 'kazupon', 0)
      })
    ).toMatchObject([
      { children: 'hello, ' },
      { children: 'kazupon' },
      { children: '!' }
    ])
  })

  test('missing', () => {
    const composer = createComposer({
      locale: 'en',
      messages: {
        en: {}
      }
    })
    expect(
      (composer as any)[TransrateVNodeSymbol]('hello', {
        name: createVNode(Text, null, 'kazupon', 0)
      })
    ).toMatchSnapshot()
  })
})
Example #5
Source File: vue-template.tsx    From vue3-datagrid with MIT License 6 votes vote down vote up 
vueTemplateConstructor =
    (vueConstructor: DefineComponent, e: HTMLElement|null, p: Record<string, any>) => {
        if (!e) {
            return null;
        }
        let el: VueElement|undefined;
        if (e?.childNodes.length) {
            el = e.childNodes[0] as VueElement;
        }
        
        if (!el) {
            // create dom element wrapper for vue instance
            el = document.createElement('span');
            e.appendChild(el);
        }
        // check, probably vue instance already inited
        let vueInstance = el._vnode;
        // if exists, return
        if (vueInstance) {
            // if vue inited just update it's properties
            for (const k in p) {
                vueInstance.component.props[k] = p[k];
            }
        } else {
            const vNode = createVNode(vueConstructor, p);
            render(vNode, el);
        }
        return vueInstance;
    }
Example #6
Source File: index.ts    From gitmars with GNU General Public License v3.0 6 votes vote down vote up 
constructor(app, component, options) {
        options = extend(true, {}, defaults, options)
        this.$el = document.createElement('div')
        this.$el.className = 'mask'
        this.$el.style.zIndex = String(nextIndex(1000, 20000))
        this.$el.style.background = 'rgba(0, 0, 0, ' + options.opacity + ')'
        this.$el.id = uuidv4()
        this.instance = createVNode(box)
        this.instance.props = {
            ...options,
            component,
            hide: () => {
                this.hide()
            }
        }
        document.body.appendChild(this.$el)
        this.show()
    }