vue单行文本溢出裁切省略号鼠标移入展示详细信息的功能

近期开发，遇到了个需求，要求内容超长时，不换行溢出裁切，显示省略号，鼠标移入时能看到他的详细信息

需求够简单，但如何判断内容是否有溢出裁切过，确成了知识盲点了

经百度调研，发现， 可以拿dom结构的clientWidth和scrollWidth进行对比，若前者小于后者，则说明有溢出裁切

因此：

方案1： 在鼠标移入（@mouseenter）时，拿到e.srcElement下的内容， 判断当  e.srcElement.clientWidth < e.srcElement.scrollWidth  时， 设置  e.srcElement.title = e.srcElement.innerHTML  即可

方案2： 通过自定义指令来操作

directives: {
    ellipsis: {
        inserted: function (el, binding) {
            el.style.overflow = "hidden"; // 样式赋值
            el.style.textOverflow = "ellipsis";
            el.style.whiteSpace = "nowrap";
            if (el.clientWidth < el.scrollWidth) { // 判断是否溢出裁切
              el.title = el.innerHTML;
            }
        },
    },
}

使用通过 v-ellipsis 来使用即可（注意别忘了溢出裁切需要限制宽度，在标签样式内赋值即可）

 

---- 注： 此处的显示全部信息是用的原生title提醒，样式可能略丑，有新要求的可以再此基础上进行调整