位置: IT常识 - 正文

Element UI 扩展tooltip 只在内容过长才显示(element插件安装方法)

编辑:rootadmin
Tooltip常用于展示鼠标 hover 时的提示信息。而在实际过程中,有这么一个需求:只有文字内容排不下,出现省略号,才需要显示tooltip的提示内容。本文章的思路是通过一个自定义指令实现如下效果:姓名字段过长时才显示tooltip ... 1. 介绍

推荐整理分享Element UI 扩展tooltip 只在内容过长才显示(element插件安装方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:elementui插件,elementui插件,element ui tooltip,elementui扩展组件,elementui扩展组件,element ui 插槽,element ui 插槽,element扩展组件,内容如对您有帮助,希望把文章链接给更多的朋友!

Tooltip常用于展示鼠标 hover 时的提示信息。

而在实际过程中,有这么一个需求:只有文字内容排不下,出现省略号,才需要显示tooltip的提示内容。

本文章的思路是通过一个自定义指令实现如下效果:姓名字段过长时才显示tooltip

2.element-ui(vue2版本)2.1 注册指令1)akTooltipAutoShow.jsElement UI 扩展tooltip 只在内容过长才显示(element插件安装方法)

说明:注册了一个名称为 'ak-tooltip-auto-show' 的指令。会根据内容进行判断是否展示tooltip。

import Vue from 'vue';import { on, off, getStyle } from 'element-ui/src/utils/dom';/*** ak-tooltip-auto-show* 当text没有被折叠时,不显示tooltip*/Vue.directive('ak-tooltip-auto-show', {inserted: function (el, binding, vnode) {el.addEventListener('mouseenter', function (e) {let defalutSilent = !!Vue.config.silent;Vue.config.silent = true;vnode.componentInstance.disabled = true;const range = document.createRange();range.setStart(el, 0);range.setEnd(el, el.childNodes.length);const rangeWidth = Math.round(range.getBoundingClientRect().width);const padding = (parseInt(getStyle(el, 'paddingLeft'), 10) || 0) + (parseInt(getStyle(el, 'paddingRight'), 10) || 0);if (rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth) {vnode.componentInstance.disabled = false;}Vue.config.silent = defalutSilent;});}});2.2 使用

说明:使用<el-tooltip v-ak-tooltip-auto-show>包囊展示的内容。

<div class="details-inner__row"><span class="details-inner__row-name">姓名:</span><el-tooltip placement="top" effect="dark" :content="item.name" v-ak-tooltip-auto-show><span class="details-inner__row-value">{{item.name}}</span></el-tooltip></div>// css.details-inner__row-value {  width: 80%;  display: inline-block;  white-space: nowrap;  text-overflow: ellipsis;  overflow: hidden;}

  

3. element-plus(vue3版本)3.1 注册指令1)akTooltipAutoShow.js

说明:注册了一个名称为 'ak-tooltip-auto-show' 的指令。会根据内容进行判断是否展示tooltip。

注意:因为element-plus与之前的element-ui不一样,在element-plus(vue3版本)中是 <展示组件>包含<el-tooltip>的,所以代码中需要在<展示组件>内查找<el-tooltop>。

import { getStyle } from 'element-plus/lib/utils/dom/index';/*** show-overflow-tooltip for text* 当text没有被折叠时,不显示tooltip*/const akTooltipAutoShow = {created(el, binding, vnode) {let tooltipNode = vnode.children.find((childrenCmpt) => childrenCmpt.component?.type.name == 'ElTooltip');if (tooltipNode) {let { content } = tooltipNode.props;if (content && ['添加', '编辑', '删除','查看'].includes(content)) {el.addEventListener('click', function (e) {let defalutDisabled = tooltipNode.component.props.disabled;if (!defalutDisabled) {tooltipNode.component.props.disabled = true;setTimeout(() => {tooltipNode.component.props.disabled = defalutDisabled;}, 200);}});} else {el.addEventListener('mouseenter', (e) => {tooltipNode.component.props.disabled = true;const range = document.createRange();range.setStart(el, 0);range.setEnd(el, el.childNodes.length);const rangeWidth = Math.round(range.getBoundingClientRect().width);const padding = (parseInt(getStyle(el, 'paddingLeft'), 10) || 0) + (parseInt(getStyle(el, 'paddingRight'), 10) || 0);if (rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth) {tooltipNode.component.props.disabled = false;}});}}}};export default akTooltipAutoShow;2) 进行局部或全局注册// main.jsconst app = createApp(App);import akTooltipAutoShow from './akTooltipAutoShow.js';app.directive('ak-tooltip-auto-show', akTooltipAutoShow);

  

3.2 使用

说明:因element-plus(vue3版本)本身不提供 root element,所以需要把此指令放到<el-tooltip>的父级组件。

<div class="details-inner__row">  <span class="details-inner__row-name">姓名:</span>  <span class="details-inner__row-value" v-ak-tooltip-auto-show>    <el-tooltip placement="top-end" :content="item.name">{{item.name}}</el-tooltip>  </span></div>// css.details-inner__row-value {  width: 80%;  display: inline-block;  white-space: nowrap;  text-overflow: ellipsis;  overflow: hidden;}

  

End Web开发之路系列文章 菜单加载中...
本文链接地址:https://www.jiuchutong.com/zhishi/304713.html 转载请保留说明!

上一篇:phpcms api怎么写接口(phpcms开发手册)

下一篇:phpcms v9怎么安装(phpcms v9官网)

  • oppok9pro怎么设置动态壁纸(OPPOk9Pro怎么设置屏幕上的原点)

    oppok9pro怎么设置动态壁纸(OPPOk9Pro怎么设置屏幕上的原点)

  • 海康资源不足解决办法(海康nvr显示资源不足)

    海康资源不足解决办法(海康nvr显示资源不足)

  • 微信被别人盗了手机号被换了怎么办(微信被别人盗了钱包里的钱怎么办)

    微信被别人盗了手机号被换了怎么办(微信被别人盗了钱包里的钱怎么办)

  • 录音m4a是什么意思呀(录音m4a是mp4吗)

    录音m4a是什么意思呀(录音m4a是mp4吗)

  • flash源文件的扩展名是什么(flash的源文件格式)

    flash源文件的扩展名是什么(flash的源文件格式)

  • 地铁乘车码和公交乘车码通用吗(地铁乘车码公交车可以用吗)

    地铁乘车码和公交乘车码通用吗(地铁乘车码公交车可以用吗)

  • 苹果黑白模式怎么设置(苹果黑白模式怎么调回来)

    苹果黑白模式怎么设置(苹果黑白模式怎么调回来)

  • 局域网的拓扑结构主要有(局域网的拓扑结构应当是指它的物理拓扑结构)

    局域网的拓扑结构主要有(局域网的拓扑结构应当是指它的物理拓扑结构)

  • soul举报人成功有提示吗(soul举报人会怎样)

    soul举报人成功有提示吗(soul举报人会怎样)

  • 钉钉直播手机和电脑可以切换吗(钉钉直播手机和电脑一起看时长怎么算)

    钉钉直播手机和电脑可以切换吗(钉钉直播手机和电脑一起看时长怎么算)

  • 网络硬件系统主要包括哪些(网络硬件系统主要功能)

    网络硬件系统主要包括哪些(网络硬件系统主要功能)

  • 苹果怎么锁相册加密(苹果怎么锁相册照片)

    苹果怎么锁相册加密(苹果怎么锁相册照片)

  • 淘宝会员卡怎么用(淘宝会员卡怎么没了)

    淘宝会员卡怎么用(淘宝会员卡怎么没了)

  • 刷脸支付怎么开通(刷脸支付怎么开美颜功能)

    刷脸支付怎么开通(刷脸支付怎么开美颜功能)

  • 大王卡归属地重要吗(大王卡归属地是随机的么)

    大王卡归属地重要吗(大王卡归属地是随机的么)

  • word目录在哪个选项卡(word目录哪里找)

    word目录在哪个选项卡(word目录哪里找)

  • 畅享9plus有几个摄像头(畅享9plus几个颜色)

    畅享9plus有几个摄像头(畅享9plus几个颜色)

  • iqoo是啥手机(iqoo是啥牌子手机)

    iqoo是啥手机(iqoo是啥牌子手机)

  • 淘宝怎么找关注的直播(淘宝怎么找关注的人)

    淘宝怎么找关注的直播(淘宝怎么找关注的人)

  • 全民k歌查看微信访客(怎样从全民k歌查找微信)

    全民k歌查看微信访客(怎样从全民k歌查找微信)

  • 抖音评论区颜色怎么调(抖音评论区颜色代码)

    抖音评论区颜色怎么调(抖音评论区颜色代码)

  • 拼多多农场在哪里(拼多多农场哪里找)

    拼多多农场在哪里(拼多多农场哪里找)

  • 网线8根线必须全通吗(网线8根线必须接地线吗)

    网线8根线必须全通吗(网线8根线必须接地线吗)

  • rdev命令  查询、设置内核映像文件(chage -l命令)

    rdev命令 查询、设置内核映像文件(chage -l命令)

  • 房产税税源信息采集错误已到申报期怎么办
  • 消费税计算时的进项税额
  • 什么情况下需要补牙
  • 一般纳税人材料销售税率
  • 防伪税控技术维护费怎么申报
  • 企业所得税汇算清缴时间
  • 分公司财务负责人和总公司财务负责人
  • 环保税计税依据怎么算
  • 业务收入和营业收入关系
  • 金蝶专业版利润表本年累计公式
  • 生产设备租赁费计入什么科目
  • 做账要不要入库单和出库单
  • 非盈利组织是什么
  • 增值税多缴税款退税政策
  • 股东以私人名义帮公司付款合法吗
  • 劳务公司计提工资怎么算
  • 技术开发合同可以开专票吗
  • 建设单位增值税抵扣
  • 如何查发票真伪发票查询
  • 小规模开专票可以享受1%吗
  • 电厂采购通常采购什么
  • 营养成分表的计算表
  • 电子发票字体不同
  • 已经开了的发票可以打销货清单吗
  • 个人缴付年金的扣除限额
  • 公司发的物品叫什么
  • 应付账款暂估借方余额怎么处理
  • 债券利息收入属于什么会计科目
  • php教程100
  • Ichetucknee河的海牛,佛罗里达州 (© Jennifer Adler/Alamy)
  • wordpress是开源吗
  • 结霜的早晨
  • php中文出现乱码
  • vue3 + ts
  • 图像处理入门
  • web自动化测试平台
  • php zmq
  • thinkphp6多表关联查询
  • c语言二级指针详解
  • install PostgreSQL Community Ubuntu Documentation
  • jsp标签大全
  • java的范式
  • mysql性能监控工具和调优
  • mysql查询或
  • SQLITE3 使用总结
  • 帝国cms栏目自定义字段
  • 投资收益借贷方代表什么
  • 费用分割单使用范围
  • 没有发票的福利支出如何入帐
  • 印花税报少了交税了怎么办
  • SQLite Delete详解及实例代码
  • 委托收款和托收承付结算流程图
  • 定期定额征收和核定征收的哪种税率高
  • 劳务发票税率最新标准
  • 汇兑损益计入
  • 个人所得税利息股息红利所得适用比例税率
  • 土地契税税率计算公式
  • 发票失控成本怎么算
  • 税法对企业费用的限定
  • 出口退税过期怎么处理
  • 会计人员必备的知识和技能
  • 离岸银行账户开户
  • mssql 优化
  • 淘宝pc端打不开
  • win7系统分辨率调错了黑屏
  • centos怎么备份
  • 验证win10
  • win7如何显示文件扩展
  • JS、jQuery中select的用法详解
  • 支持向量机
  • js字符串转为json
  • jquery$符号
  • android 按键
  • 使用权资产
  • linux常用命令及实例
  • 手机360安卓桌面怎么去除广告
  • 国家税务总局办税指南
  • 汉中税务大厅电话是多少
  • 公司买车购置税怎么做账
  • 船舶吨税是中央税还是地方税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设