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

  • 超话签到第几名怎么看(超话第一个签到分数最高吗)

    超话签到第几名怎么看(超话第一个签到分数最高吗)

  • 手机突然震动但也没有信息(手机突然震动但没消息)

    手机突然震动但也没有信息(手机突然震动但没消息)

  • cad正在检查许可不动了怎么办(cad正在检查许可,然后闪退)

    cad正在检查许可不动了怎么办(cad正在检查许可,然后闪退)

  • mate30无线投屏电视没显示(mate30怎么无线投屏)

    mate30无线投屏电视没显示(mate30怎么无线投屏)

  • iphone7plus屏幕不亮了(iphone7plus屏幕不亮)

    iphone7plus屏幕不亮了(iphone7plus屏幕不亮)

  • Excel 2010的工作簿默认有____个工作表(Excel2010的工作簿的扩展名是( ))

    Excel 2010的工作簿默认有____个工作表(Excel2010的工作簿的扩展名是( ))

  • 华为手机照片怎么添加文字(华为手机照片怎么传到苹果)

    华为手机照片怎么添加文字(华为手机照片怎么传到苹果)

  • ipad微信更新不了新版本怎么办(iPad微信更新不了)

    ipad微信更新不了新版本怎么办(iPad微信更新不了)

  • 抖音通用设置里面怎么找不到检查更新(抖音通用设置里没有非wifi这项功能)

    抖音通用设置里面怎么找不到检查更新(抖音通用设置里没有非wifi这项功能)

  • 苹果testflight是干什么的(苹果testflight是越狱吗)

    苹果testflight是干什么的(苹果testflight是越狱吗)

  • qq验证问题在哪修改(qq验证问题在哪修改查看)

    qq验证问题在哪修改(qq验证问题在哪修改查看)

  • 晶片和芯片的区别(芯片就是晶圆吗)

    晶片和芯片的区别(芯片就是晶圆吗)

  • ai对齐快捷键(ai对齐快捷键面板)

    ai对齐快捷键(ai对齐快捷键面板)

  • 苹果11手机怎么开机(苹果11手机怎么强制关机重启)

    苹果11手机怎么开机(苹果11手机怎么强制关机重启)

  • 微信消息怎么置顶好友(微信怎么收到消息不显示)

    微信消息怎么置顶好友(微信怎么收到消息不显示)

  • pc在线什么意思(pc在线啥意思)

    pc在线什么意思(pc在线啥意思)

  • mate30屏幕尺寸(mate30pro屏幕尺寸)

    mate30屏幕尺寸(mate30pro屏幕尺寸)

  • 手机处理违章怎么处理(手机处理违章怎么处理别人的违章)

    手机处理违章怎么处理(手机处理违章怎么处理别人的违章)

  • vivos5怎么返回到桌面(vivoy52s手机怎么返回)

    vivos5怎么返回到桌面(vivoy52s手机怎么返回)

  • 苹果x充电是多少w(苹果x充电多少w)

    苹果x充电是多少w(苹果x充电多少w)

  • 红米k20pro可以升级MIUI11吗(红米k20pro可以升级安卓12吗)

    红米k20pro可以升级MIUI11吗(红米k20pro可以升级安卓12吗)

  • 智联招聘如何投简历(智联招聘如何投诉招聘公司的人)

    智联招聘如何投简历(智联招聘如何投诉招聘公司的人)

  • nova3怎么调闪充(nova3 快充)

    nova3怎么调闪充(nova3 快充)

  • 小米9屏幕是什么材料(小米9屏幕是什么的)

    小米9屏幕是什么材料(小米9屏幕是什么的)

  • 全民k歌怎么合唱(全民k歌怎么合唱自己的作品)

    全民k歌怎么合唱(全民k歌怎么合唱自己的作品)

  • ps如何放大缩小图层(ps如何放大缩小快捷键)

    ps如何放大缩小图层(ps如何放大缩小快捷键)

  • 不可抵扣进项税额转出
  • 增值税留抵退税怎么做账务处理
  • 工资里个人代扣款是什么
  • 新公司开基本户银行选择
  • 衍生金融负债是金融负债吗
  • 暂估成本没有发票
  • 土地出让价款
  • 管道安装固定方式
  • 未开票收入下月开票怎么报税
  • 固定资产在现金流量表中的体现
  • 销货清单是否需盖章
  • 公司注册资金实缴有什么好处
  • 小规模开票给一般纳税人避税合法吗
  • 企业减免的所得税税率
  • 在建工程转固定资产账务处理
  • 免退税企业结转怎么操作
  • 工会费可以个税抵扣吗
  • 应交税费核算的税金有哪些
  • 工资薪酬所得税税率
  • 进项税额转出转多了
  • 作废的发票还需要装订在凭证里吗
  • 个税申报状态失败
  • 单位缴交的社保和医保还要交其他费用吗
  • 营业外支出调减应该填在纳税调整项目明细表哪一项
  • 购进原材料直接销售应该怎样结转成本呢
  • 委托贷款利息收入怎么开发票
  • 注册资本多少钱算大公司
  • vue框架使用方法
  • 城镇土地使用税征收范围
  • 增值税专用发票的税率是多少啊
  • 电脑主板bios设置
  • laravel5 使用try catch的实例详解
  • 支付的测试报告怎么查
  • PHP:stream_filter_remove()的用法_Stream函数
  • php实战开发教程
  • win7无法打开打印机
  • 直接计入当期利润的利得和损失有哪些
  • 会计中的计算公式
  • 若依名字的含义是什么意思
  • 微信小程序插件有哪些
  • 过拟合能不能从根本上解决
  • vuecdn方式引入
  • 网络请求失败什么意思
  • 自学前端,你必做的事
  • 正则表达式除去指定字母
  • phpstorm wsl
  • 企业预付账款属于什么科目
  • 持续ping ip的命令
  • 拓展训练属于培训费吗
  • 零申报季报怎么报税的具体流程
  • 本年利润的会计分录有哪些
  • 普通发票密码区出格了能用吗
  • python分布式执行框架Ray的介绍
  • 预缴增值税附加税
  • 什么发票可以抵扣增值税吗
  • 财务预算资产负债表如何编制
  • 企业摊销无形资产价值时的会计处理
  • 企业间借款利息收入
  • 银行手续费已扣发票未开的账务处理
  • 房屋维修基金是谁交
  • 不动产进项税额分期抵扣暂行办法还有效吗
  • 土地契税税率计算公式
  • 股权投资业务是什么意思
  • sql转换
  • ubuntu not authorized to perform operation
  • centos6.8图形界面
  • 硬盘分几个区最好
  • xp系统怎么和win7系统共享
  • windows10无法关闭
  • Linux查看内存的命令是
  • 为了保证系统安全,必须为用户和角色设置密码
  • nodejs异步处理执行顺序
  • jquery结合html实现中英文页面切换
  • unity怎么把文件导入项目
  • python计算文件大小
  • jQuery实现的tab标签切换效果示例
  • 使用SQLite本地数据库
  • jquery遍历对象使用的方法
  • 增值税应税货物清单
  • 烟叶税属于中央税还是地方税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设