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引入jq插件的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了node+vue前后端分离实现登录时使用图片验证码,记录前端使用验证码登录的过程，后端用的是node.js，关键模块是svg-captcha，结合实例代码给大家介绍的非常详细，需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue自定义render统一项目组弹框功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
这篇文章主要介绍了Vue通过ref获取不到$refs问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了vue实现弹幕功能,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-10-10
这篇文章主要介绍了浅谈Vue.js 中的 v-on 事件指令的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了Vue Vuex搭建vuex环境及vuex求和案例分享， Vue 中实现集中式状态管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理，下文相关介绍,需要的朋友可以参考一下2022-04-04
关于Elementui中toggleRowSelection()方法实现分页切换时记录之前选中的状态
这篇文章主要介绍了关于Elementui中toggleRowSelection()方法实现分页切换时记录之前选中的状态,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要给大家介绍了关于vue中如何实时监听div元素盒子的宽高的相关资料,在Vue中你可以使用Vue的计算属性和侦听器来动态监测元素的高度,文中给出了简单代码示例,需要的朋友可以参考下2023-09-09
Vue Router 是 Vue 的官方路由，它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举，本文将通过简单的示例为大家介绍一下vue-router的使用，需要的可以参考一下2023-06-06
最新评论