vue单行文本溢出会出现title提示自定义指令
更新时间：2023年01月18日 10:04:00 作者：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提示指令的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要为大家详细介绍了如何基于vue实现图片预览功能并显示在弹窗的最上方,感兴趣的小伙伴可以跟随小编一起学习一下2024-10-10
Vue是一种流行的JavaScript框架,用于构建用户界面,在Vue中,页面跳转通常使用路由(Router)来实现,除此之外还有很多方法,这篇文章主要给大家介绍了关于vue跳转页面的几种常用方法,需要的朋友可以参考下2024-05-05
这篇文章主要介绍了vue.js使用v-model实现父子组件间的双向通信,结合实例形式分析了vue.js基于v-model父子组件间的双向通信的具体实现技巧,需要的朋友可以参考下2020-02-02
Vue的响应式原理是Vue最核心的特性之一，也是Vue能够为开发者提供高效便捷的开发体验的重要原因之一，这篇文章主要介绍了响应式的原理及其实现方式，需要详细了解可以参考下文2023-05-05
今天小编就为大家分享一篇element-ui中的select下拉列表设置默认值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue实现数字金额动态变化效果，数字动态变化是我们在前端开发中经常需要做的效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-09-09
这篇文章介绍了VueX安装及使用基础教程，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-01-01
这篇文章主要介绍了浅谈vue 二级路由嵌套和二级路由高亮问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家介绍了如何简单实现vue验证码60秒倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
ElementUI表单验证validate和validateField的使用及区别
Element-UI作为前端框架,最常使用到的就是表单验证,下面这篇文章主要给大家介绍了关于ElementUI表单验证validate和validateField的使用及区别,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
最新评论