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

  • 如何选择游戏试玩项目,参加游戏试玩时需要注意这几点(如何做游戏试玩)

    如何选择游戏试玩项目,参加游戏试玩时需要注意这几点(如何做游戏试玩)

  • 华为手机套合上盖怎么不息屏(华为手机套合上关闭)

    华为手机套合上盖怎么不息屏(华为手机套合上关闭)

  • iqoo5手机是立体双扬声器吗(iqoo3是立体声吗)

    iqoo5手机是立体双扬声器吗(iqoo3是立体声吗)

  • vivoz6对比vivos6有什么不同吗(vivoz6对比vivos6,哪个手机好)

    vivoz6对比vivos6有什么不同吗(vivoz6对比vivos6,哪个手机好)

  • 电脑怎么下载微信(电脑怎么下载微信到手机)

    电脑怎么下载微信(电脑怎么下载微信到手机)

  • 三星音乐播放器不见了(三星音乐播放器app下载)

    三星音乐播放器不见了(三星音乐播放器app下载)

  • qq邮箱邮件加载失败怎么办(qq邮箱加载失败是什么原因)

    qq邮箱邮件加载失败怎么办(qq邮箱加载失败是什么原因)

  • 安卓手机如何打开.kux文件(安卓手机如何打开exe文件)

    安卓手机如何打开.kux文件(安卓手机如何打开exe文件)

  • 打印机显示e1是什么意思(当打印机显示e1的时候怎么办)

    打印机显示e1是什么意思(当打印机显示e1的时候怎么办)

  • 网速突然特别慢了是为什么(网速突然特别慢过一会又恢复)

    网速突然特别慢了是为什么(网速突然特别慢过一会又恢复)

  • sb1100二极管可以用什么代替(sb1100二极管可以用什么型号代替)

    sb1100二极管可以用什么代替(sb1100二极管可以用什么型号代替)

  • mov格式用什么播放器(mov格式用什么播放)

    mov格式用什么播放器(mov格式用什么播放)

  • 移除描述文件密码是什么(苹果移除描述文件密码不知道密码)

    移除描述文件密码是什么(苹果移除描述文件密码不知道密码)

  • 微信怎么设置朋友验证(微信怎么设置朋友圈仅三天可见)

    微信怎么设置朋友验证(微信怎么设置朋友圈仅三天可见)

  • 十年没用的qq还能找回密码吗(十年没用的qq还能恢复吗)

    十年没用的qq还能找回密码吗(十年没用的qq还能恢复吗)

  • 不能分享超过五分钟的视频怎么办(不能分享5分钟以上的视频)

    不能分享超过五分钟的视频怎么办(不能分享5分钟以上的视频)

  • 手机淘宝发不出去消息(为什么手机淘宝发不了图片)

    手机淘宝发不出去消息(为什么手机淘宝发不了图片)

  • 分辨率越高越清晰吗(分辨率越高越清晰吗手机)

    分辨率越高越清晰吗(分辨率越高越清晰吗手机)

  • 抖音消息会显示已读吗(抖音消息会显示几点已读吗)

    抖音消息会显示已读吗(抖音消息会显示几点已读吗)

  • 拍视频如何用siri配音(拍视频如何用别人的声音)

    拍视频如何用siri配音(拍视频如何用别人的声音)

  • 三星s10是双扬声器吗(三星s10e是双扬声器)

    三星s10是双扬声器吗(三星s10e是双扬声器)

  • 怎么解除抖音拉黑的人(怎么解除抖音拉黑人)

    怎么解除抖音拉黑的人(怎么解除抖音拉黑人)

  • 网易考拉如何查看分类(网易考拉怎么查真伪)

    网易考拉如何查看分类(网易考拉怎么查真伪)

  • qq音乐如何添加收藏夹栏(qq音乐如何添加别人的歌单)

    qq音乐如何添加收藏夹栏(qq音乐如何添加别人的歌单)

  • 波形主题怎么设置(波形主题样式长什么样)

    波形主题怎么设置(波形主题样式长什么样)

  • 手机怎么关闭自动续费(手机怎么关闭自启动)

    手机怎么关闭自动续费(手机怎么关闭自启动)

  • vivo手机有打印功能吗(vivo手机有打印功能吗不用电脑)

    vivo手机有打印功能吗(vivo手机有打印功能吗不用电脑)

  • Web 攻防之业务安全:密码找回安全案例总结.(web攻防之业务安全实战指南在线阅读)

    Web 攻防之业务安全:密码找回安全案例总结.(web攻防之业务安全实战指南在线阅读)

  • 报关单境外收货人错了怎么办
  • 税务一证通
  • 企业所得税季度预缴纳税申报表
  • 专款专用需要缴纳企业所得税吗?
  • 个人劳务费怎么交税
  • 补贴收入企业所得税
  • 原材料暂估入库的账务处理有哪些
  • 融单是什么意思
  • 建筑工程免税项目
  • 广告策划费会计分录
  • 境外企业在境内取得的收入所得税
  • 代垫电费给对方怎么开票
  • 计算客户的应收账款成本
  • 公司支付宝付款
  • 企业关闭股东拿回投资款需要交税吗
  • 普票抵扣税
  • 2016年的发票2020年可以认证吗
  • 三八妇女节要求小班幼儿到校怎么分享
  • 小规模国税地税怎么交
  • 营业外支出增值税率是多少
  • 营业执照副本编号是指什么
  • 跨年如何冲减预提费用?
  • windows登录提示
  • 重装系统最好排名
  • c盘文件详解
  • 未分配利润亏损怎么做分录
  • npm sill idealTree buildDeps 安装踩坑指南(详细版)
  • 计提坏账准备对所得税费用的影响
  • 烟草企业亏损
  • 白金汉宫维多利亚女王雕像寓意
  • 卡特迈国家公园地图
  • 股权名称应该填什么?
  • 实际出资大于注册资金
  • thinkphp分表查询
  • gmt微调
  • 深度学习数据集—水果数据集大合集
  • 存根联是自己留着吗
  • 不动产租赁专票对房产有无影响
  • html元素一般分为哪几类
  • 企业编制现金流量表的主要目的是什么
  • 固定资产的货币时间价值
  • 处置长期股权投资其他综合收益结转
  • mysql 锁详解
  • 营业额的纳税比例是多少
  • ce认证所需的模块有哪些
  • 有限合伙企业如何报税
  • 车辆处置如何缴纳企业所得税
  • 建筑施工中的合格是指
  • 母公司孙子公司
  • 公账上的钱怎么提出来
  • 收到上年度所得税返还会计分录
  • 开了假发票什么后果?
  • 技术服务费收入会计分录怎么写
  • 工会经费账务处理流程
  • 税前利息为什么这么高
  • 猪肉蔬菜是免税农产品吗
  • 新成立公司会计要做哪些事情
  • 金蝶美金账户怎么删除
  • 企业利润率计算公式是怎样的
  • 依法建账的法是指
  • sql语句数量
  • mysql日期字段
  • 全民用车app下载
  • windows7安装后正常使用的安装方法
  • win8系统如何安装软件
  • linux中的rpm
  • linux tr命令详解
  • windows 10预览版
  • WIN10如何禁用驱动程序强制签名
  • win10 mobile 1709
  • perl \w
  • unity固定位置随机生成物体
  • ftp自动上传脚本怎么用
  • node.js抓包
  • 数据字典实例详解
  • 月度申报如何改为季度申报
  • 走逃失踪纳税人如何处理
  • 四个落实是哪四个落实
  • 如何计算环保税减征政策
  • 在外地买车在青岛能买吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设