elementUI之Tooltip组件定制化，实现tooltip显隐可控

    elementUI中的Tooltip组件是用于展示鼠标 hover 时的提示信息，类似于原生html的title属性。我们实际开发中一般还会在此基础上提几个需求：（1）.自定义显示文本行数 （2）.文本超出行数，以省略号代替，并在鼠标 hover 出现提示信息 (3).文本过长时省略后，提供相应的快捷复制功能。基于这些原因，在此对elementUI之Tooltip组件进行了简单定制化。

目录

1.demo页面

2.Javascript核心代码 

3.demo演示

4.实现原理简述

---

1.demo页面

kt-tooltip-demo.html

    
    
    
    
    
    




    
        
KT-TOOLTIP DEMO
        
不出现省略号时，tooltip不显示：
        
        

        
出现省略号时，tooltip显示，可一键复制：
        
        

        
可设置label：
        
    

2.Javascript核心代码 

kt-tooltip.js

document.write("");

Vue.component("kt-tooltip", {
    template: `
        

            
{{ label }}{{ value }}
            

                 {{ label }}{{ value }}
            
            
                

                    
{{ value }}
                    
一键复制
                
                

                    {{ label }}{{ value }}
                
            
        
    `,
    data() {
        return {
            flag: true
        }
    },
    methods: {
        visibilityChange(event) {
            let ev = event.target;
            let thisWidth = ev.offsetWidth; // 元素的宽度
            let wordWidth = $(ev).prev('.kt-tooltip-input__hidden')[0].scrollWidth; // 文本内容的宽度
            if (wordWidth / thisWidth > this.rows) {
                this.flag = false;
            }
        },
        handlerClipShow(event) {
            const clipboard = new Clipboard(event.target);
            clipboard.on('success', (e) => {
                this.$message({
                    message: '复制成功',
                    type: 'success'
                });
                e.clearSelection();
            });
        }
    },
    props: {
        label: {
            type: String,
            required: false
        },
        value: {
            type: String,
            required: true
        },
        width: {
            type: String,
            default: '100%'
        },
        rows: {
            type: Number,
            default: 1
        },
        color: {
            type: String,
            required: false
        },
        placement: {
            type: String,
            default: 'top'
        },
        clip: {
            type: Boolean,
            default: false
        }
    }
});

3.demo演示

 

 

4.实现原理简述

1.同时布局三个文本内容div展示区
2.第一个文本内容区，即div1，仅用于计算要盛放的文本宽度，自身不呈现，此处采用绝对定位不占位隐藏；
3.第二个文本内容区，即div2，是一个比较媒介，实际呈现，当由div1得出的文本宽度超出div2宽度时，div2隐藏，div3显示，否则一直呈现div2；
4.第三个文本内容区，即div3，是一个具体含有el-tooltip组件的候选区，由div1与div2的比较结果决定显隐。
PS：完整demo以图包方式存放，右键 演示demo.gif 存储=》重命名xxx.rar=>解压即可。