自定義vue指令，實現(xiàn)el-tooltip僅在文字溢出時顯示，文字未溢出則不顯示，復(fù)制即可使用 一、寫在開頭

推薦整理分享自定義vue指令，實現(xiàn)el-tooltip僅在文字溢出時顯示，文字未溢出則不顯示，復(fù)制即可使用(vue3自定義指令)，希望有所幫助，僅作參考，歡迎閱讀內(nèi)容。

文章相關(guān)熱門搜索詞:vue3.0自定義指令,vuejs自定義指令,自定義vue指令,vuecli自定義指令,vue3自定義指令,自定義vue指令,vue3.0自定義指令,自定義vue指令,內(nèi)容如對您有幫助，希望把文章鏈接給更多的朋友！

在項目里遇到了這種需求，想到el-table里的show-overflow-tooltip屬性就有這種效果，在參考了一些網(wǎng)上的文章以及show-overflow-tooltip跟el-tooltip的源碼后，覺得使用自定義指令的方式來實現(xiàn)這個需求會很方便，于是便有了以下代碼

二、自定義指令代碼1、創(chuàng)建一個js文件，復(fù)制粘貼以下代碼即可使用，無需改動import Vue from 'vue'import debounce from 'throttle-debounce/debounce'import { Tooltip } from 'element-ui'Vue.use(Tooltip)/*** 指令功能：元素內(nèi)容溢出隱藏時懸浮tooltip展示詳細(xì)內(nèi)容，元素內(nèi)容未溢出時不展示* 基于element-table的show-overflow-tooltip原理與el-tooltip的功能實現(xiàn)* 使用方式：* <div v-overflow-tooltip>這是一段會溢出的文本內(nèi)容</div>** 指令也可傳遞參數(shù)，參數(shù)內(nèi)容為el-tooltip的參數(shù)配置：* <div v-overflow-tooltip="{content:'啦啦啦啦~~~'}">這是一段會溢出的文本內(nèi)容</div>* *//*** tooltipVM —— el-tooltip的VNode實例* tooltipContent —— 默認(rèn)提示文本內(nèi)容* props —— el-tooltip的配置參數(shù)* ctx —— 命名空間* activateTooltip —— el-tooltip展開的防抖延遲，默認(rèn)50ms* */let tooltipContentlet propsconst ctx = '@@store'// 創(chuàng)建一個Vue實例并渲染為真實DOM,內(nèi)有一個空的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) => {// 獲取元素文本內(nèi)容，作為el-tooltip的默認(rèn)content進行展示el[ctx].tooltipContent = el.innerText || el.textContent// 獲取通過指令接收的綁定值el[ctx].props = { ...binding.value }const computedStyle = getComputedStyle(el)// 使用range對象判斷文本是否有溢出，優(yōu)先考慮使用range對象， 因為 scrollWidth 屬性在火狐瀏覽器 v32 版本中有 bug。當(dāng)元素的 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) {// 文本溢出了，綁定鼠標(biāo)事件el.addEventListener('mouseenter', el[ctx].handleMouseEnter)el.addEventListener('mouseleave', el[ctx].handleMouseLeave)} else {// 文本未溢出，移除鼠標(biāo)事件el.removeEventListener('mouseenter', el[ctx].handleMouseEnter)el.removeEventListener('mouseleave', el[ctx].handleMouseLeave)}}Vue.directive('overflowTooltip', {// 只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里進行一次初始化設(shè)置，初始化鼠標(biāo)事件，控制el-tooltip的展開與收起bind: function (el, binding, vnode) {el[ctx] = {tooltipContent: '',props: {},handleMouseEnter: () => {// 展開el-tooltip方法，將el-tooltip的引用元素指向當(dāng)前綁定節(jié)點，然后執(zhí)行展開邏輯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: () => {// 關(guān)閉el-tooltip方法，銷毀內(nèi)部popperJS的實例后走關(guān)閉邏輯tooltipVM.doDestroy()tooltipVM.setExpectedState(false)tooltipVM.handleClosePopper()}}},inserted: overflowHandler,componentUpdated: overflowHandler,unbind (el) {delete el[ctx]}})2、使用方法2.1. 默認(rèn)無參數(shù)用法

沒有傳遞值給指令的時候，將使用el-tooltip的默認(rèn)配置，提示內(nèi)容默認(rèn)顯示指令綁定元素的文本內(nèi)容

<el-input v-model="value" placeholder="請輸入內(nèi)容" style="width: 200px; margin-bottom: 25px"></el-input><div v-overflow-tooltip class="overflow">{{ value }}</div>

默認(rèn)效果

2.2. 自定義傳遞參數(shù)用法

參數(shù)內(nèi)容其實就是el-tooltip官方定義可以傳遞的配置參數(shù)，我們可以自定義內(nèi)容、主題、顯示位置等

<el-input v-model="value" placeholder="請輸入內(nèi)容" style="width: 200px; margin-bottom: 25px"></el-input><div v-overflow-tooltip="{content:'這是通過content自定義的溢出顯示內(nèi)容',effect:'light'}" class="overflow">{{ value }}</div>

自定義參數(shù)效果

三、實現(xiàn)原理簡述

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

最開始我們需要創(chuàng)建一個tooltip的vue實例，以及其他的一些空變量為后續(xù)內(nèi)容做準(zhǔn)備。此處為了方便，vue實例中使用了JSX語法，大家可以根據(jù)需求更換為h函數(shù)（createElement）的寫法。