Vue 项目中如何优雅的使用弹出提示库

原创
前端路迹
2021-7-11 21:30
编辑于 2022-6-17 16:42

弹出提示框组件(比如element-ui的popover)在大数据循环中使用会存在性能问题,页面的操作会出现卡顿,一般在大数据循环的场景下,就不建议使用复杂的组件。这种情况下如何优雅的使用弹出提示呢?

首先要放弃在循环中使用弹出提示组件,可以改为鼠标移到循环的元素上,再调用第三方库或者自己写一个全局的提示库来做提示,这样在循环初始化时就不会消耗大量性能。

<div v-for="item in list" @mouseover="showTip">
</div>

在循环中使用组件的好处是可以绑定当前循环的数据项,弹出提示的内容和操作可以非常方便的拿到绑定数据。使用第三方弹出提示库,弹出的内容如果是html,比如要使用Vue组件,由于第三方库弹出的节点是自己创建的,已经脱离了当前Vue组件环境,因此我们需要把弹出的html变为一个Vue的挂载点。

比如我们使用第三方提示库 tippy。

import Vue from 'vue'
import tippy from 'tippy.js'
import 'tippy.js/themes/light.css'
import TipContent from './TipContent.vue'

export default {
  methods:{
      showTip(e) {
            const constructor = Vue.extend(TipContent)
            const instance = new constructor({
                el: document.createElement('div'),
                data: {
                    info: this.info
                }
            })
            const tip = tippy(e.target, {
                interactive: true,
                appendTo: document.body,
                maxWidth: 'none',
                delay: [400, 0],
                theme: 'light',
                content: instance.$el
            })
        }
  }
}
  1. TipContent是弹出提示的Vue组件,这里面和项目的其他组件一样,可以使用element-ui的组件库,也可以使用公共库等;
  2. 通过Vue.extend的方式将组件变成一个Vue“类”,接着创建一个挂载点,通过这种方式就可以将当前组件的数据传入到提示的组件中;
  3. 将挂载元素传入第三库,这样就可以显示出弹出框了。
转载请注明出处。本文地址: https://www.qinshenxue.com/article/vue-tip-component.html
关注 & 咨询问题