位置: 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官网)

  • windows11录屏怎么操作(windows11录屏怎么隐藏鼠标)

    windows11录屏怎么操作(windows11录屏怎么隐藏鼠标)

  • vivo x27耳机接口在哪(vivox27耳机插孔)

    vivo x27耳机接口在哪(vivox27耳机插孔)

  • 手机qq文件传输中断(手机qq文件传输失败)

    手机qq文件传输中断(手机qq文件传输失败)

  • 微博更换手机号没有其他验证方式(微博更换手机号失败怎么回事)

    微博更换手机号没有其他验证方式(微博更换手机号失败怎么回事)

  • 荣耀20青春版支持语音唤醒吗(荣耀20青春版支持多少瓦快充)

    荣耀20青春版支持语音唤醒吗(荣耀20青春版支持多少瓦快充)

  • oppo曲面屏手机有几款(oppo曲面屏手机贴什么膜)

    oppo曲面屏手机有几款(oppo曲面屏手机贴什么膜)

  • 微信被加入黑名单后有啥显示(微信被加入黑名单发信息他能收到吗)

    微信被加入黑名单后有啥显示(微信被加入黑名单发信息他能收到吗)

  • 监控回放卡顿怎么解决(监控回放总卡怎么回事)

    监控回放卡顿怎么解决(监控回放总卡怎么回事)

  • 微信怎么扫码登录(微信怎么扫码登录到另外一个手机)

    微信怎么扫码登录(微信怎么扫码登录到另外一个手机)

  • qq加群频繁怎么解除(qq加群频繁怎么办)

    qq加群频繁怎么解除(qq加群频繁怎么办)

  • 开了情侣空间可以不让别人看到吗(开了情侣空间可以看到对方消息吗)

    开了情侣空间可以不让别人看到吗(开了情侣空间可以看到对方消息吗)

  • 被称为裸机的是指(所谓“裸机”是)

    被称为裸机的是指(所谓“裸机”是)

  • gtx1070配多大电源

    gtx1070配多大电源

  • 双十一发货最迟多少天(双十一发货最迟多少天可以要求补偿)

    双十一发货最迟多少天(双十一发货最迟多少天可以要求补偿)

  • 全面屏pro是什么意思(全屏pro什么意思)

    全面屏pro是什么意思(全屏pro什么意思)

  • ios13如何安装字体(苹果13字体怎么安装)

    ios13如何安装字体(苹果13字体怎么安装)

  • 抖音短视频制作工具有哪些(怎么抖音短视频制作)

    抖音短视频制作工具有哪些(怎么抖音短视频制作)

  • 小红书买的东西在哪看(小红书买的东西别人能看到吗)

    小红书买的东西在哪看(小红书买的东西别人能看到吗)

  • win10pro是什么版本(win10pro哪个版本好)

    win10pro是什么版本(win10pro哪个版本好)

  • 鸿蒙系统如何添加天气卡片?鸿蒙系统添加天气卡片教程(鸿蒙系统如何添加信任软件)

    鸿蒙系统如何添加天气卡片?鸿蒙系统添加天气卡片教程(鸿蒙系统如何添加信任软件)

  • Windows10激活密钥/激活码/神key分享 附激活工具(windows10激活密钥免费2023)

    Windows10激活密钥/激活码/神key分享 附激活工具(windows10激活密钥免费2023)

  • 分享帝国CMS7.0实现记录所有浏览访问的会员的方法(帝国cms如何使用)

    分享帝国CMS7.0实现记录所有浏览访问的会员的方法(帝国cms如何使用)

  • 一个工程中可以有多个主函数
  • 申请退还增量留抵税额的条件包括
  • 买房契税缴纳比例
  • 小规模纳税人代扣代缴个人所得税
  • 先开票,后发货怎么处理
  • 销售收入怎么做会计凭证
  • 发出商品和委托代销商品科目的区别
  • 会费要交增值税吗
  • 纳税人在什么情况下可以延期申报
  • 税法关于开具发票的规定
  • 期间费用如何设置项目核算
  • 房地产企业土地使用税
  • 印花税缴款了发现报错了怎么办?
  • 固定资产抵扣对账怎么算
  • 固定资产发票未到可以确认固定资产吗
  • 福建水利建设专业排名
  • 发票章和税号不匹配
  • 生活支出计入什么科目
  • 自查补缴税款严重吗
  • 既销售货物又提供劳务例题
  • 建筑公司异地预缴增值税
  • 代销返点如何进行会计处理?
  • 跨年的所得税怎么冲
  • 向股东借款会计科目
  • 10款手机赚钱软件下载
  • php 替换
  • 政府回购企业土地
  • php页面之间传值
  • 怎么修改boot启动项
  • 企业所得税汇算清缴
  • 应交消费税的会计分录
  • 融资租赁业务的操作程序
  • 什么时编制
  • ts与vue3.0
  • 深入理解php内核
  • 期间费用为何要摊销
  • zendframework3中文手册
  • 直接材料成本计算公式
  • php yield 异步
  • php管理员权限控制
  • 高新技术企业补助需要交所得税吗
  • 分配股利账务处理
  • 商家为消费者提供餐具
  • 应付职工薪酬账户期末余额可能是
  • 物业监控安装地点要求
  • mysql数据类型怎么判断
  • phpcms使用教程
  • 房屋租赁时需要交税吗
  • 小规模纳税人有几种税率
  • 原材料专票入库怎么入账
  • 销售折让的账务处理方法
  • 固定资产指的是几年度
  • 餐费计入哪个科目合理避税
  • 失控发票未付款什么意思
  • 增值税农产品免税
  • 企业给员工单独交社保
  • 预付账款的账务处理过程
  • 债券发行费用计入初始成本会计分录
  • 资产类的会计科目有啥特点
  • 行权期行权条件成就什么意思
  • mysql清空表内容
  • MS DTC 事务管理器无法启动的解决方案
  • linux ipi
  • windows7 ie
  • win10任务栏恢复原样
  • 字符集 linux
  • macza
  • 装win8.1
  • win8怎么修改电脑密码修改
  • 朝鲜引擎
  • 电脑预装软件是什么意思
  • win8新建用户
  • 手游接入
  • perl中use的用法
  • 详解Bootstrap四种图片样式
  • js阻止浏览器后退
  • 电子税务局申报截止日期
  • 国家税务局总局政策咨询
  • 车辆营运证去哪里审
  • 豫麦336
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设