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 二维数组
Nov 26 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
基于Javascript实现倒计时功能
Feb 22 Javascript
BootStrap中关于Select下拉框选择触发事件及扩展
Nov 22 Javascript
JavaScript实现各种排序的代码详解
Aug 28 Javascript
JS文件中加载jquery.js的实例代码
May 05 jQuery
解决Vue动态加载本地图片问题
Oct 09 Javascript
node创建Vue项目步骤详解
Mar 06 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 代价太高
2016/04/26 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
基于jquery的文章中所有图片width大小批量设置方法
2013/08/01 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
JavaScript中Promise的使用详解
2017/02/26 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
关于JavaScript语句后面的分号问题
2017/12/07 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
微信小程序背景音乐开发详解
2019/12/12 Javascript
详解Vue3中对VDOM的改进
2020/04/23 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
python根据时间生成mongodb的ObjectId的方法
2015/03/13 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
python实现手机销售管理系统
2019/03/19 Python
python中while和for的区别总结
2019/06/28 Python
python扫描线填充算法详解
2020/02/19 Python
python批量生成条形码的示例
2020/10/10 Python
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
皮肤科医师岗位职责
2013/12/04 职场文书
大学生职业生涯规划书模板
2014/01/03 职场文书
基层党员对照检查材料
2014/09/24 职场文书
2014年小学美术工作总结
2014/12/20 职场文书
首都博物馆观后感
2015/06/05 职场文书
党员身份证明材料
2015/06/19 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
为什么 Nginx 比 Apache 更牛逼
2021/03/31 Servers
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
Python中字符串对象语法分享
2022/02/24 Python
SQL Server Agent 服务无法启动
2022/04/20 SQL Server