【小玩意】-省略文字显示-vue插件

发表于 阅读次数： Changyan： 本文字数： 836 阅读时长 ≈ 2 分钟

title: vue插件-显示省略号内容
date: 2023-09-25 15:05:38
tags:

  1. 依赖element-ui/elementUI-plus
  2. 自定义指令：v-abbreviation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import ElementUI from "element-ui"
export default {
    install(Vue) {
        let mt = null; //弹框实例
        Vue.directive('abbreviation', {
            inserted(element, binding) {
                const Popover1 = Vue.extend(ElementUI.Popover)

                if (!mt) { //没有实例就创建
                    const vmtest = new Popover1()
                    mt = vmtest
                    mt.trigger = "hover"
                    mt.placement = 'bottom'
                }
                element.addEventListener('mouseover', function () {
                    console.log('listen hover', element);
                    if (element && element.scrollWidth > element.offsetWidth) {
                        mt.reference = element
                        mt.referenceElm = element
                        mt.content = element.innerText
                        mt.$mount()
                        document.body.appendChild(mt.$el)
                    }
                })

            }
        })
    }
}

现已发布到npm： npm i Vabbreviation 安装