位置: IT常识 - 正文

自定义vue指令，实现el-tooltip仅在文字溢出时显示，文字未溢出则不显示，复制即可使用(vue3自定义指令)

编辑：rootadmin

自定义vue指令，实现el-tooltip仅在文字溢出时显示，文字未溢出则不显示，复制即可使用一、写在开头

推荐整理分享自定义vue指令，实现el-tooltip仅在文字溢出时显示，文字未溢出则不显示，复制即可使用(vue3自定义指令)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue3.0自定义指令,vuejs自定义指令,自定义vue指令,vuecli自定义指令,vue3自定义指令,自定义vue指令,vue3.0自定义指令,自定义vue指令,内容如对您有帮助，希望把文章链接给更多的朋友！

在项目里遇到了这种需求，想到el-table里的show-overflow-tooltip属性就有这种效果，在参考了一些网上的文章以及show-overflow-tooltip跟el-tooltip的源码后，觉得使用自定义指令的方式来实现这个需求会很方便，于是便有了以下代码

二、自定义指令代码1、创建一个js文件，复制粘贴以下代码即可使用，无需改动import Vue from 'vue'import debounce from 'throttle-debounce/debounce'import { Tooltip } from 'element-ui'Vue.use(Tooltip)/*** 指令功能：元素内容溢出隐藏时悬浮tooltip展示详细内容，元素内容未溢出时不展示* 基于element-table的show-overflow-tooltip原理与el-tooltip的功能实现* 使用方式：* <div v-overflow-tooltip>这是一段会溢出的文本内容</div>** 指令也可传递参数，参数内容为el-tooltip的参数配置：* <div v-overflow-tooltip="{content:'啦啦啦啦~~~'}">这是一段会溢出的文本内容</div>* *//*** tooltipVM —— el-tooltip的VNode实例* tooltipContent —— 默认提示文本内容* props —— el-tooltip的配置参数* ctx —— 命名空间* activateTooltip —— el-tooltip展开的防抖延迟，默认50ms* */let tooltipContentlet propsconst ctx = '@@store'// 创建一个Vue实例并渲染为真实DOM,内有一个空的el-tooltip组件const vm = new Vue({render (h) {return (<Tooltip ref="customToolTipRef" content={ tooltipContent } { ...{ props } }></Tooltip>)}}).$mount()const tooltipVM = vm.$refs.customToolTipRefconst activateTooltip = debounce(50, tooltipVM => tooltipVM.handleShowPopper())const overflowHandler = (el, binding, vnode) => {// 获取元素文本内容，作为el-tooltip的默认content进行展示el[ctx].tooltipContent = el.innerText || el.textContent// 获取通过指令接收的绑定值el[ctx].props = { ...binding.value }const computedStyle = getComputedStyle(el)// 使用range对象判断文本是否有溢出，优先考虑使用range对象，因为 scrollWidth 属性在火狐浏览器 v32 版本中有 bug。当元素的 CSS 属性中使用了 text-overflow: ellipsis 和 box-sizing: border-box 时获取到的 scrollWidth 的值会比真实值偏小const range = document.createRange()range.setStart(el, 0)range.setEnd(el, el.childNodes.length)const rangeDOM = range.getBoundingClientRect()const padding = parseInt(computedStyle.paddingLeft.replace('px', '')) + parseInt(computedStyle.paddingRight.replace('px', ''))const rangeWidth = Math.round(rangeDOM.width)if (rangeWidth + padding > el.offsetWidth || el.scrollWidth > el.offsetWidth) {// 文本溢出了，绑定鼠标事件el.addEventListener('mouseenter', el[ctx].handleMouseEnter)el.addEventListener('mouseleave', el[ctx].handleMouseLeave)} else {// 文本未溢出，移除鼠标事件el.removeEventListener('mouseenter', el[ctx].handleMouseEnter)el.removeEventListener('mouseleave', el[ctx].handleMouseLeave)}}Vue.directive('overflowTooltip', {// 只调用一次，指令第一次绑定到元素时调用。在这里进行一次初始化设置，初始化鼠标事件，控制el-tooltip的展开与收起bind: function (el, binding, vnode) {el[ctx] = {tooltipContent: '',props: {},handleMouseEnter: () => {// 展开el-tooltip方法，将el-tooltip的引用元素指向当前绑定节点，然后执行展开逻辑tooltipContent = el[ctx].tooltipContentprops = el[ctx].propsvm.$forceUpdate()tooltipVM.referenceElm = eltooltipVM.$refs.popper && (tooltipVM.$refs.popper.style.display = 'none')tooltipVM.doDestroy()tooltipVM.setExpectedState(true)activateTooltip(tooltipVM)},handleMouseLeave: () => {// 关闭el-tooltip方法，销毁内部popperJS的实例后走关闭逻辑tooltipVM.doDestroy()tooltipVM.setExpectedState(false)tooltipVM.handleClosePopper()}}},inserted: overflowHandler,componentUpdated: overflowHandler,unbind (el) {delete el[ctx]}})2、使用方法2.1. 默认无参数用法自定义vue指令，实现el-tooltip仅在文字溢出时显示，文字未溢出则不显示，复制即可使用(vue3自定义指令)

自定义vue指令，实现el-tooltip仅在文字溢出时显示，文字未溢出则不显示，复制即可使用(vue3自定义指令)

没有传递值给指令的时候，将使用el-tooltip的默认配置，提示内容默认显示指令绑定元素的文本内容

<el-input v-model="value" placeholder="请输入内容" style="width: 200px; margin-bottom: 25px"></el-input><div v-overflow-tooltip class="overflow">{{ value }}</div>

默认效果

2.2. 自定义传递参数用法

参数内容其实就是el-tooltip官方定义可以传递的配置参数，我们可以自定义内容、主题、显示位置等

<el-input v-model="value" placeholder="请输入内容" style="width: 200px; margin-bottom: 25px"></el-input><div v-overflow-tooltip="{content:'这是通过content自定义的溢出显示内容',effect:'light'}" class="overflow">{{ value }}</div>

自定义参数效果

三、实现原理简述

不了解自定义指令的小伙伴可以看一下我在文末分享的链接。

最开始我们需要创建一个tooltip的vue实例，以及其他的一些空变量为后续内容做准备。此处为了方便，vue实例中使用了JSX语法，大家可以根据需求更换为h函数（createElement）的写法。