如何通过render()挂载到Element上

如何将自定义的template通过render()的方式挂载一个Element上?

  • 下面是为完成的代码,不知道具体改如何解决
renderTool(c) {
      // c是一个Element类型的对象
      return new Vue({
        render(h) {
          const vnode = (
            <Tooltip title="port" >
                      <div className="my-port" />
              </Tooltip>
          )
          const props = {...port}
          return h(vnode, {props})
        }
      }).$mount(c)
    }

demo vue3

<body><div id="app"></div></body>
const { createApp, ref } = Vue
createApp({
  template:`<button @click="count--">-</button><span>{{count}}</span><button @click="count++">+</button>`,
  setup(){
    const count = ref(0)
    return { count }
  }
}).mount('#app')
new Vue({
        components: {Tooltip},
        template: ` <Tooltip title="port" >
                      <div className="my-port" />
              </Tooltip>`
      }).$mount(c)

我尝试将Tooltip挂载都<rect></rect>元素上,但是结果变成了
image
这里是antv/x6的连接桩port的场景。事实我更想了解这个tooltip在挂载时应该怎样才会在元素外部,还是应该将rect元素挂载到tooltip上

这跟什么场景又有什么关系呢

tooltip组件本来默认都是直接绑定在body上的

如果你想把tooltip组件变成在实际dom变成

<tooltip content="提示内容"><div>内容</div></tooltip>

这样的结构的话,请问你如何做到在父元素隐藏/不存在的情况下显示子元素

而且element组件库只在vue3版本才提供更改tooltip实际挂载dom的属性

如果你想更改提示内容官网有详细的案例与属性api(实际上在tooltip内部的内容)

<tooltip>
  <template #content>
    自定义的提示内容
  </template>
  <span>Hover on top</span>
</tooltop>

在html部分里面最好使用BBQ(kebab-case),我记得会有警告来着