vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)


Posted in Javascript onNovember 12, 2020

vue项目开发的过程中,如果需要文字溢出的dom元素鼠标悬浮时才显示title文字的话,可以封装一个自定义的指令。

方法一、

组件内代码如下:

directives: {
  title: {
   inserted(el) {
    const { clientWidth, scrollWidth, title } = el;
    if (!title && scrollWidth > clientWidth) el.title = el.innerText;
   }
  }
 },

使用:

<article v-title>修修的铁拳修修的铁拳修修的铁拳修修的铁拳修修的铁拳</article>

方法二、

或者鼠标进入后dom后方法处理,方法如下:

titeEnter(e) {
   const target = e.target;
   const { clientWidth, scrollWidth, title } = target;
   if (!title && scrollWidth > clientWidth) target.title = target.innerText;
  },

使用:

<article @mouseenter="titleEnter">修修的铁拳修修的铁拳修修的铁拳修修的铁拳修修的铁拳</article>

补充知识:vue页面文本过长显示...鼠标悬停显示全文本

项目使用vue+element UI,列表页面修改某一列的样式,这一列的文本过长,在表格中会自动换行,会将表格撑大,影响页面美观,需求就是让文本显示超过长度后面显示…,鼠标移上去后显示全文本,网上可以使用:cell-style修改,但是在我的webstorm中,都没有这个属性提示,不过有:row-style属性,这个很明显是修改行的样式,后来发现有这么一个属性值可以完美解决这个问题。

vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)

还有一个类似的需求,文本过长显示…,鼠标移上去之后,显示全文本,可以给这个属性上面增加样式:style=“text-overflow: ellipsis; overflow: hidden” 然后增加 :title="item2.modelName"属性和值,可以解决这个问题。

vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)

以上这篇vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何用JavaScript动态呼叫函数(两种方式)
May 03 Javascript
js判断鼠标同时离开两个div的思路及代码
May 31 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
Apr 13 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
AngularJS中的promise用法分析
May 19 Javascript
webpack配置sass模块的加载的方法
Jul 30 Javascript
详解Angular4 路由设置相关
Aug 26 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
解决vuex刷新数据消失问题
Nov 12 #Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 #Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 #Javascript
javascript实现搜索筛选功能实例代码
Nov 12 #Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 #Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 #Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 #Javascript
You might like
Zend引擎的发展 [15]
2006/10/09 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
php跨站攻击实例分析
2014/10/28 PHP
制作安全性高的PHP网站的几个实用要点
2014/12/30 PHP
破解Session cookie的方法
2006/07/28 Javascript
避免回车键导致的页面无意义刷新的解决方法
2011/04/12 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
JS onkeypress兼容性写法详解
2016/04/27 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
underscore之Collections_动力节点Java学院整理
2017/07/10 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
微信小程序实现多行文字超出部分省略号显示功能
2019/10/23 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
Python最长公共子串算法实例
2015/03/07 Python
python中利用Future对象回调别的函数示例代码
2017/09/07 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
详解CSS3原生支持div铺满浏览器的方法
2018/08/30 HTML / CSS
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
阿里健康官方海外旗舰店:阿里健康国际自营
2017/11/24 全球购物
土木工程毕业生推荐信
2013/10/28 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
学雷锋标语
2014/06/25 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
2014年家长学校工作总结
2014/11/20 职场文书
毕业生个人自荐书
2015/03/05 职场文书
科级干部培训心得体会
2016/01/06 职场文书
七年级语文教学反思
2016/03/03 职场文书
教你用Java在个人电脑上实现微信扫码支付
2021/06/13 Java/Android
R9700摩机记
2022/04/05 无线电