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

  • 自来水水费增值税发票票样
  • 统一机构信用代码查询系统
  • 安装费人工费有什么不一样
  • 学校食堂支出
  • 存款利息缴纳个税
  • 个税三代手续费返还增值税报表怎么填
  • 商品的入账价值包括消费税吗
  • 无偿赠送他人货物交增值税吗
  • 成品油经销企业开具的成品油电子专用发票
  • 无偿划拨资产涉税问题
  • 开票系统年费怎么缴纳
  • 多计提的城建税怎么办
  • 其他业务收入的核算内容
  • 应收而未收的装修款如何做账务处理?
  • 帮别的公司做账的叫什么公司
  • 小规模纳税人税率3%减按1%
  • 能否异地进行税款支付?
  • 卖股票为什么要留一手
  • 运输增值税专票含税价怎么算
  • 申请一般纳税人需要多长时间
  • 延迟抵扣的税务风险
  • 进项发票不够如何避税
  • 公司商品质量问题导致员工与公司一起被起诉了怎么办
  • 企业的其他业务收入有
  • 备查账簿根据企业的实际需要设置没有固定的格式要求
  • 取得免税农产品进项税转出
  • 工程和技术研究和试验发展
  • 2020年运费发票备注栏新规定
  • 如何栽柑橘苗
  • php中session什么意思
  • 房屋及建筑物改造费用
  • php中strtotime
  • 用php做计算
  • 收到投资款的会计科目怎么入账
  • 大数据找工作好找吗
  • 产权转移数据印花税计税依据含不含增值税
  • 应交税费为负数要调整吗
  • 公司费用计入什么科目
  • 会计账簿记账规则最新
  • 公司代买社保怎么收费
  • access使用查询向导固定常数
  • 公司银行销户钱转到哪里去
  • 营改增之后发票的变化
  • 经营结余和事业结余
  • 会计电算化的内容和任务
  • 工程施工属于什么经营范围
  • 固定资产计提折旧的原则
  • 收到成本发票如何记账
  • 养老保险如何记算
  • 蓝字发票作废流程视频
  • 连锁药店成本会计
  • 以前的房产证现在能过户吗
  • 财务大写金额书写样板
  • mysql命令行导出结果
  • won10怎么安装
  • 亲测可用抖音低价单赚派费项目
  • ubuntu不支持设置属性
  • avgnt.exe
  • macos 备份
  • win10系统升级后桌面图标变大
  • win8系统修改密码
  • win7系统纯净版和旗舰版
  • 防火墙ddos攻击防范
  • python语言基础与应用答案
  • Unity3D游戏开发标准教程吴亚峰于复兴人民邮电出版社
  • jsp实现ajax
  • 批处理设置dns
  • 模仿文明
  • jquery的checked
  • 一起学ap
  • jquery ajax后台返回list,前台用jquery遍历list的实现
  • python排列代码
  • javascript编程技术
  • javascript零基础入门
  • android 启动service
  • activity启动原理
  • 税控盘异常什么原因
  • 出口退的增值税怎么算
  • 税控盘可以申请电子发票吗?
  • 重庆国税电子税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设