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 相关文章推荐
Extjs在exlipse中设置自动提示的方法
Apr 07 Javascript
Jquery ThickBox插件使用心得(不建议使用)
Sep 08 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
javascript实现网站加入收藏功能
Dec 16 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
Javascript实现base64的加密解密方法示例
Jun 27 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 Javascript
vue中根据时间戳判断对应的时间(今天 昨天 前天)
Dec 20 Javascript
vue路由跳转传递参数的方式总结
May 10 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 Javascript
JS中箭头函数与this的写法和理解
Jan 14 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
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
学习jquery之一
2007/04/27 Javascript
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
js单向链表的具体实现实例
2013/06/21 Javascript
javascript 树形导航菜单实例代码
2013/08/13 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
js字符串完全替换函数分享
2014/12/03 Javascript
剖析Node.js异步编程中的回调与代码设计模式
2016/02/16 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
[00:32]2018DOTA2亚洲邀请赛EG出场
2018/04/03 DOTA
Python写入数据到MP3文件中的方法
2015/07/10 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
Python开发最牛逼的IDE——pycharm
2018/08/01 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
Python日志logging模块功能与用法详解
2020/04/09 Python
美国首屈一指的礼品篮供应商:GiftTree
2018/01/06 全球购物
保荐人的岗位职责
2013/11/19 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
2015共产党员公开承诺书
2015/01/22 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
教师节座谈会主持词
2015/07/03 职场文书
教师网络培训心得体会
2016/01/09 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
Redis分布式锁的7种实现
2022/04/01 Redis
Consul在linux环境的集群部署
2022/04/08 Servers
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis