脚本宝典收集整理的这篇文章主要介绍了vue单行文本溢出会出现title提示自定义指令,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
平时开发中,如果标题超出一行,我们希望为其添加tITle
的提示,但是,如果统一加title=xxx
,会出现,文本是否超出都会出现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
。
现在我们实现一个自定义指令,实现单行溢出省略号和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提示指令的资料请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的vue单行文本溢出会出现title提示自定义指令全部内容,希望文章能够帮你解决vue单行文本溢出会出现title提示自定义指令所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。