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

  • 递延所得税资产和负债怎么理解
  • 工资个人所得税标准表
  • 资质费用是什么意思
  • 企业会计准则颁布部门
  • 向保险公司缴纳的保险费可以税前扣除吗
  • 超市购物卡发票可以报销吗
  • 从业人数和资产的关系
  • 公司购买软件著作权
  • 挂应付账款之后发现用现金付款如何调整?
  • 预存送返利的帐户怎么查
  • 工程外管证核销是什么意思
  • 企业销售商品的业务有什么特点
  • 去年支付的费用今年取得发票
  • 增值税发票做假什么后果
  • 票据追索权向谁追索
  • 回迁房怎么交税
  • 土地增值税的征税对象,是村集体
  • 垫资的利息的合法区间
  • 发票领出来之后税盘要怎么处理
  • 应交税费包括了增值税吗
  • 小规模企业增值税税率
  • 公司收到个人投资款没有备注
  • 进项和销项单价的比例
  • 员工离职再入职要重新签订合同吗
  • 保险保障基金的管理单位是
  • 联想Lenovo ThinkPad X13 Gen1
  • window最新漏洞
  • 预缴增值税附加税款怎么填写申报表
  • 出口企业年底结转税金
  • 默认网关不可用频繁掉线
  • linux系统安装谷歌浏览器教程
  • PACKAGER.EXE - PACKAGER是什么进程 有什么用
  • 开始菜单中的磁贴是什么
  • PHP:ftp_nb_get()的用法_FTP函数
  • 购买材料时采购会计分录
  • 公司的房租收入要交税吗
  • 营改增预收款确认收入
  • 收回已核销的坏账分录
  • vue2动态路由
  • node升级版本
  • 增值税简易计税方法适用范围
  • 研发支出可以全是管理费用
  • 独资设立的有限公司
  • mongodb的坑
  • 用发票做账是什么意思?
  • 如何设置长期有效的二维码
  • 收益性支出包括哪些内容
  • 卖家电的税点是多少呀
  • 出纳账务处理分录
  • 存货报废进项税额需要转出吗
  • 个人转让不动产交印花税吗
  • 民办非企业单位什么意思
  • 股东分红算不算成本费用
  • 无偿租借
  • 一般纳税人抵扣进项税有时间要求吗
  • centos7.9
  • mysql 5.7.18 winx64 免安装 配置方法
  • mysql中存储引擎
  • 取消默认
  • Ubuntu 15.04系统怎么安装Visual Studio Code 2015?
  • WIN10系统中没有接入音频设备 要启动gui
  • vlcplayer最新版
  • linux挂载文件步骤
  • eclipse win7
  • android view动画
  • 深入了解求助者时,首先要进行工作是
  • android开发中遇到的问题
  • python的导入
  • android aidl binder
  • 编程中的python
  • js测试工具
  • nodejs图片上传
  • 利用python中的运算符可以编程解决你身边的哪些问题
  • unity3d移动代码
  • python的入门教程
  • 财税刘毅
  • 购置税发票怎么看自己交了多少税
  • 河南地税网上个税怎么交
  • 契税计税依据含装修费吗
  • 伊川娘娘山传说
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设