实现文字溢出时出现tips

 

实现类似下拉的checkbox中文字溢出的项才出现tips

结合elementui。

html部分

<section @mouseover=handleCellMouseEnter>
   <el-checkbox-group v-model="checkedList" @change="handleCheckedCitiesChange">
       <el-tooltip v-for="(item, index) in list" :key="`${index}_${toolTipList[index]}`" :disabled="toolTipList[index]" popper-class='ad-tooltips place-left' placement="left" ref="tooltip" :content='item'>
              <el-checkbox  :label="item" :data-index="index">{{ item }}</el-checkbox>
        </el-tooltip>
    </el-checkbox-group>
</section>

js部分

export default {
  data() {
    return {
      checkedList: [],
      list: ['a','b'],
      toolTipList: [...new Array(2)].map((e) => {
        return true;
      }),
    };
  },
  methods: {
    handleCellMouseEnter(e) {
      const textDom = e.target.parentNode.querySelector(".el-checkbox__label");
      if (!textDom) {
        return;
      }
      const cw = textDom.clientWidth;
      const range = document.createRange();
      range.setStart(textDom, 0);
      range.setEnd(textDom, textDom.childNodes.length);
      const rangeWidth = range.getBoundingClientRect().width;
      if (rangeWidth > cw) {
        const index = e.target.parentNode.getAttribute("data-index");
        this.toolTipList.splice(index, 1, false);
      }
    }
  }
};

给最外层的div或者section加一个mouseover事件

因为触发的e可能是前面的checkbox也可能是后面的文字，所以先获取父节点在找label的class，保证获取到文字的dom

然后获取宽度，再创建一个矩形，矩形的大小就是文字的长度，获取矩形的长度，如果矩形的长度长于文字展示的长度，说明溢出，就要进行一些其他的操作了。

（创建矩形来对比是判断是否溢出的核心，这边结合了elementui如果其他的框架代码不同，思路应该是一样的）

这边其他的操作就是修改elementui的tooltips的disabled。

我是先创建一个和list等长的，全是true的数组，然后鼠标进入检查到溢出了就把这个数组相应的值改为false，这样就会展示出tooltip。

注：

1、使用splice修改数组才能响应式

2、给el-tooltip加一个key，所以在数组对应位置的值改为false以后key也改了，页面重新渲染tooltip就出现了