js动态插入vue组件(代码片段)

最新推荐文章于 2024-11-08 15:37:09 发布

原创最新推荐文章于 2024-11-08 15:37:09 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

javascript 同时被 3 个专栏收录

20 篇文章

订阅专栏

前端

20 篇文章

订阅专栏

vue

14 篇文章

订阅专栏

本文介绍了一个使用Vue.js创建的动态Tooltip组件实现方法。该组件利用了element-ui库中的Tooltip元素，并通过JavaScript动态地将组件插入到DOM中。这种方式能够使Tooltip更加灵活且易于定制。

const tipComponent = Vue.extend({
        template: `<el-tooltip 
          placement="right" 
          effect="light"
          :popper-options="{ boundariesElement: 'body', gpuAcceleration: false, removeOnDestroy: true }"
          :open-delay="0"
        >
        <div slot="content">
          vue代码片段
        </div>
        <div style='width: 100%;height: 100%;'>${el.innerHTML}</div></el-tooltip>`
      })
      // eslint-disable-next-line new-cap
      const component = new tipComponent().$mount()
      el.appendChild(component.$el)

使用vue渲染组件然后通过js动态插入至dom中