vue单行文本溢出会出现title提示自定义指令
作者：qb
这篇文章主要为大家介绍了vue单行文本溢出会出现title提示自定义指令，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
正文
平时开发中，如果标题超出一行，我们希望为其添加title的提示，但是，如果统一加title=xxx，会出现，文本是否超出都会出现title的现象。
1、直接使用title
<template>
<div class="parent">
<h3>古诗：</h3>
<div class="child" :title="msg">
{{ msg }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
msg: "更上一层楼",
};
},
};
</script>
<style>
.parent {
display: flex;
align-items: center;
width: 200px;
}
.child {
flex: 1;
}
</style>
粘贴到自己的自己的.vue文件中会发现，不管什么时候，都会提示title。
2、使用自定义指令
现在我们实现一个自定义指令，实现单行溢出省略号和title提示的功能。
directives: {
ellipsis: {
inserted: function (el, binding) {
// 设置超出隐藏
el.style.overflow = "hidden";
el.style.textOverflow = "ellipsis";
el.style.whiteSpace = "nowrap";
// 鼠标移入提示title
if (el.clientWidth < el.scrollWidth) {
el.title = el.innerHTML;
}
},
},
},
使用方式：
<div class="child" v-ellipsis>
{{ msg }}
</div>
此时，如果文本不超出一行，是不会有title提示的。
如果超过一行，就会有...和title提示，比如我们把诗写全了。
msg: "白日依山尽，黄河入海流。欲穷千里目，更上一层楼",
是不是发现，一个v-ellipsis就可以实现省略号和超出一行title提示的功能，粘贴可用。
以上就是vue单行文本溢出会出现title提示自定义指令的详细内容，更多关于vue文本溢出title提示指令的资料请关注脚本之家其它相关文章！