Vue实现判断文本是否超出，超出后显示省略号并且hover展示全部内容

平常做项目总会遇到文字太长，有的显示1行，超出隐藏，有的显示两行，而且还会遇到鼠标hover时展示省略的部分，考虑用vue封装成公用的组件。

需要用到以下内容

1. 文字超出多行隐藏

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; //行数
-webkit-box-orient: vertical;

2. 判断文字是否处于隐藏的状态

需要涉及到获取文字在标签宽度下的实际高度，动态加上css控制溢出隐藏。使用getComputedStyle方法计算元素的高度height和行高，行高乘以行数得到隐藏后的高度height1，当height超过height1时，当前应处于被隐藏状态

let lineHeight = getComputedStyle(element).lineHeight.replace("px", "") - 0 || 20;
let height = getComputedStyle(element).height.replace("px", "") - 0;
//这里使用-0将字符串转化成数字

组件结构

1.png

组件全量代码如下

组件接受两个参数，value：展示的文字内容，row：最多展示几行（需要给组件设置宽度），同时在body插入了一个div，hover展示文字的全部内容。

index.js文件代码如下

import VueText from './VueText'
const component = {
    install: function(Vue){
        Vue.component('VueText',VueText)
    }
}
export default component

在组件内的使用

1. 在main.js内引用

import component from '@/components/VueText'
Vue.use(component)

2. 在组件内的引用

import VueText from '@/components/VueText'
export default {
  name: "xxx",
  components: {
    VueText 
  }
}

3. 使用

ps: 有小伙伴提了个bug，当页面滚动时，弹窗的位置会出现问题，然后重新写了下，获取组件最近一个 overflow 值为 auto 或 scroll 的父元素，监听滚动，滚动时关闭弹窗。同时加上了高度碰撞检测。代码地址：vue-cy-admin

再次更新，最近在写vue3，又写了一版vue3的版本，新建一个vue文件，弹窗提示直接用的element-plus的tooltip