vue2 二次封装el-tooltip

 

 

前言 

我们在使用 element-ui 组件库里的 el-tooltip 实现文本提示功能时，发现只要用了这个组件，不管文本有没有超出鼠标移动上去时都会显示其提示，但是很多时候我们更想要的是只有当文本超出并且显示省略号后，此时鼠标移动上去才会显示全部

那么接下来我们就来实现一下

大致思路

• 鼠标悬停或聚焦时触发的方法，用于检查并设置提示框可见性 
• 此时去获取父容器和内容的宽度分别通过 `parentNode.offsetWidth` 和 `offsetWidth`
• 最后根据宽度比较确定是否启用提示框

 

组件封装 

CustomTooltip.vue 

<template>
  <div class="custom-tooltip">
    <el-tooltip effect="dark" :disabled