element-ui —— el-tooltip 超出部分显示省略号,鼠标悬浮显示详情

前言:el-tooltip 组件本身就是悬浮提示功能,在对它进行二次封装时,要对它进行优化,实现超出的文本加提示,没超出的不给予提示。

  1. 思路:加一个中间层,子集为数据全量,控制中间层的样式,并设置宽度,通过 ref 进行宽度对比,若子集比中间层更宽,既说明显示了...样式


 





在需要用到组件的页面中引入 

 

import tooltipOver from './components/tooltipOver'

使用组件 

tip:当同一页面使用多次组件时,需要定义不同的refName属性 

你可能感兴趣的:(js,elementUi二次封装,el-tooltip,超出省略号hover显示)