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 相关文章推荐
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
js关闭当前页面(窗口)的几种方式总结
Mar 05 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
Jul 25 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
JavaScript添加随滚动条滚动窗体的方法
Feb 23 Javascript
浅谈在js传递参数中含加号(+)的处理方式
Oct 11 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 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
PHP安全编程之加密功能
2006/10/09 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
jquery实现的可隐藏重现的靠边悬浮层实例代码
2013/05/27 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
JS版微信6.0分享接口用法分析
2016/10/13 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
Vue解决移动端弹窗滚动穿透问题
2020/12/15 Vue.js
JS实现点击掉落特效
2021/01/29 Javascript
Python 命令行参数sys.argv
2008/09/06 Python
Python创建文件和追加文件内容实例
2014/10/21 Python
python生成器generator用法实例分析
2015/06/04 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
python读取txt文件,去掉空格计算每行长度的方法
2018/12/20 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
分析经典Python开发工程师面试题
2019/04/08 Python
Python实现代码统计工具
2019/09/19 Python
Python调用.net动态库实现过程解析
2020/06/05 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
Skyscanner波兰:廉价航班
2017/11/07 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
应届毕业生求职信范文分享
2013/12/26 职场文书
个人委托书范本
2014/04/02 职场文书
捐款倡议书
2014/04/14 职场文书
《秋游》教学反思
2014/04/24 职场文书
财务会计专业自荐书
2014/06/30 职场文书
国际金融专业自荐信
2014/07/05 职场文书
优秀教师单行材料
2014/12/16 职场文书
婚礼女方父母答谢词
2015/01/04 职场文书
义诊活动总结
2015/02/04 职场文书
专职安全员岗位职责
2015/04/11 职场文书
投标单位介绍信
2015/05/05 职场文书
工作时间证明
2015/06/15 职场文书