vue中多行(单行)文本溢出才会出现提示的自定义指令

平时开发中，如果标题超出多行，我们希望出现省略号，并且为其添加简单提示。但是，如果我们在全局写公共class类，行数不好控制。如果统一加title=xxx，又会出现文本是否超出都会出现title的现象。

我们可以利用vue中的自定义指令，很方便的实现多行文本溢出和简单提示的效果。

// 以下代码可以直接粘贴进自己的`.vue`文件中查看效果
<template>
  <div class="parent">
    <h3>标题</h3>
    <div class="child" v-ellipsis="3">
      {{ msg }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg:
        "好雨知时节，当春乃发生。随风潜入夜，润物细无声。野径云俱黑，江船火独明。晓看红湿处，花重锦官城。",
    };
  },
  directives: {
    ellipsis: {
      inserted: function (el, binding) {
        // 获取期望的文本行数，默认为1
        const n = binding.value || 1;
        // （1）实现超出n行有省略号
        el.style.display = "-webkit-box";
        el.style.webkitBoxOrient = "vertical";
        el.style.webkitLineClamp = n;
        el.style.overflow = "hidden";
        // （2）实现鼠标移入在溢出情况下才有提示文案
        if (el.clientHeight < el.scrollHeight) {
          el.title = el.innerHTML;
        }
      },
    },
  },
};
</script>

<style>
.parent {
  display: flex;
  align-items: center;
  width: 200px;
  font-size: 12px;
  border: 1px solid #aaa;
}
h3 {
  margin-right: 4px;
  white-space: nowrap;
}
</style>

多行使用方式：

<div class="child" v-ellipsis="3">
  {{ msg }}
</div>

此时，如果超出3行，就会出现...和title提示文案。

v-ellipsis='3'就可以实现省略号和超出期望行数后的title提示功能。

单行使用方式：

<div class="child" v-ellipsis>
  {{ msg }}
</div>

单行情况可以省略行数，如果超出单行就会出现...和title的提示文案。

v-ellipsis就可以实现单行溢出并且出现title提示的效果。

写在最后

---

如果有用，记得点个赞支持一下吆~