一、寫在開頭

在項(xiàng)目里遇到了這種需求，想到el-table里的show-overflow-tooltip屬性就有這種效果，在參考了一些網(wǎng)上的文章以及show-overflow-tooltip跟el-tooltip的源碼后，覺得使用自定義指令的方式來實(shí)現(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的功能實(shí)現(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實(shí)例
 * tooltipContent —— 默認(rèn)提示文本內(nèi)容
 * props —— el-tooltip的配置參數(shù)
 * ctx —— 命名空間
 * activateTooltip —— el-tooltip展開的防抖延遲，默認(rèn)50ms
 * */
let tooltipContent
let props
const ctx = '@@store'
// 創(chuàng)建一個Vue實(shí)例并渲染為真實(shí)DOM,內(nèi)有一個空的el-tooltip組件
const vm = new Vue({
  render (h) {
    return (<Tooltip ref="customToolTipRef" content={ tooltipContent } { ...{ props } }></Tooltip>)
  }
}).$mount()
const tooltipVM = vm.$refs.customToolTipRef
const activateTooltip = debounce(50, tooltipVM => tooltipVM.handleShowPopper())

const overflowHandler = (el, binding, vnode) => {
  // 獲取元素文本內(nèi)容，作為el-tooltip的默認(rèn)content進(jìn)行展示
  el[ctx].tooltipContent = el.innerText || el.textContent
  // 獲取通過指令接收的綁定值
  el[ctx].props = { ...binding.value }
  const computedStyle = getComputedStyle(el)
  // 使用range對象判斷文本是否有溢出，優(yōu)先考慮使用range對象， 因?yàn)?scrollWidth 屬性在火狐瀏覽器 v32 版本中有 bug。當(dāng)元素的 CSS 屬性中使用了 text-overflow: ellipsis 和 box-sizing: border-box 時獲取到的 scrollWidth 的值會比真實(shí)值偏小
  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)用。在這里進(jìn)行一次初始化設(shè)置，初始化鼠標(biāo)事件，控制el-tooltip的展開與收起
  bind: function (el, binding, vnode) {
    el[ctx] = {
      tooltipContent: '',
      props: {},
      handleMouseEnter: () => {
        // 展開el-tooltip方法，將el-tooltip的引用元素指向當(dāng)前綁定節(jié)點(diǎn)，然后執(zhí)行展開邏輯
        tooltipContent = el[ctx].tooltipContent
        props = el[ctx].props
        vm.$forceUpdate()
        tooltipVM.referenceElm = el
        tooltipVM.$refs.popper && (tooltipVM.$refs.popper.style.display = 'none')
        tooltipVM.doDestroy()
        tooltipVM.setExpectedState(true)
        activateTooltip(tooltipVM)
      },
      handleMouseLeave: () => {
        // 關(guān)閉el-tooltip方法，銷毀內(nèi)部popperJS的實(shí)例后走關(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>

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

參數(shù)內(nèi)容其實(shí)就是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實(shí)例，以及其他的一些空變量為后續(xù)內(nèi)容做準(zhǔn)備。此處為了方便，vue實(shí)例中使用了JSX語法，大家可以根據(jù)需求更換為h函數(shù)（createElement）的寫法。

聲明了一個overflowHandler方法，此方法用于在指令的inserted與componentUpdated生命周期執(zhí)行，該方法內(nèi)部獲取了元素的文本內(nèi)容與配置參數(shù)，并判斷文本是否溢出，根據(jù)是否溢出來進(jìn)行綁定或者移除鼠標(biāo)事件。

判斷文本是否溢出最簡單的方式就是比較元素的scrollWidth是否大于offsetWidth，但是elementUI并不是這么判斷的，他們是用range對象去進(jìn)行判斷，這里我們也這么用，將綁定元素的開頭設(shè)定為range對象的起始點(diǎn)，再將綁定元素的末尾設(shè)置為range對象的結(jié)束點(diǎn)（綁定元素的末尾指該元素的所有直接子節(jié)點(diǎn)的總數(shù)，注意：是直接子節(jié)點(diǎn)childNodes?。?！不是直接子元素children?。?！），關(guān)于range對象的使用我會在文末貼上鏈接。

自定義指令的生命周期中，在最初的bind周期里，我們只做一件事，也是最重要的一件，在綁定的DOM元素上開辟一個新的空間，存儲我們需要的內(nèi)容默認(rèn)文本，配置參數(shù)，鼠標(biāo)移入溢出事件。

關(guān)于鼠標(biāo)事件內(nèi)的邏輯，除了handleMouseEnter中最開始的三句，意為獲取參數(shù)后重新渲染一次tooltip組件，其他部分都是照搬elementUI的源碼，用于展開與收起tooltip。

inserted與componentUpdated生命周期中執(zhí)行我們之前聲明的overflowHandler方法。

unbind生命周期中刪除我們?yōu)楫?dāng)前DOM所開辟的新空間。

四、存在問題以及個人疑問

1、存在問題

這個指令雖然能用，但還是存在一些問題的，最明顯的有兩點(diǎn)。

• 綁定元素層級只能有一級，不能有多級，比如有時候想給el-input也實(shí)現(xiàn)溢出提示的效果，該自定義指令不生效。

• 無法判斷多行文本換行時的溢出隱藏，比如有時我們除了限制文本單行溢出隱藏外，還會設(shè)置2行、3行等溢出隱藏，此時指令不生效，因?yàn)樽远x指令中的判斷僅能判斷單行文本是否溢出。

• .........

該指令還有進(jìn)一步優(yōu)化的空間，但是這里我個人覺得投入產(chǎn)出比太小沒必要，各位可以根據(jù)自己的需求進(jìn)行優(yōu)化，也歡迎各位將自己發(fā)現(xiàn)的問題跟優(yōu)化方案貼出。

2、個人疑問

我在獲取到指令傳遞過來的對象binding.value時，將他重新賦給了變量props，之后又在JSX里進(jìn)行了傳遞，寫法是{...{ props }}，但是按照J(rèn)SX的傳遞多個參數(shù)的寫法，這里不是應(yīng)該寫{...props}就可以了了嗎，為什么我這么寫的話，el-tooltip一直接收不到傳遞過來的值呢？我很好奇，而且這里我還必須給變量命名為props，換個別的名字后組件也會接收不到值，查了半天也沒解決這個疑問??，各位大佬能幫我解惑下嗎??

五、參考文章

• element table組件的show-overflow-tooltip屬性的實(shí)現(xiàn)原理：https://wangzl.blog.csdn.net/article/details/122353237

• el-table 組件源碼：https://github.com/ElemeFE/element/blob/dev/packages/table/src/table-body.js

• el-tooltip 組件源碼：https://github.com/ElemeFE/element/blob/dev/packages/tooltip/src/main.js

• Range對象的使用：https://developer.mozilla.org/zh-CN/docs/Web/API/Range

• Vue自定義指令：https://v2.cn.vuejs.org/v2/guide/custom-directive.html

---

如若轉(zhuǎn)載，請注明出處，謝謝??????文章來源地址http://www.zghlxwxcb.cn/news/detail-444061.html