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提示的效果。
文章出自：https://juejin.cn/post/7191378274202124344
作者：bqb
原文始发于微信公众号（前端24）：vue中多行(单行)文本溢出才会出现提示的自定义指令
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/216457.html
