模擬元素的title屬性，自定義Vue指令

function showTitle(el, title) {
  const popover = getPopover()
  const popoverStyle = popover.style

  if (title === undefined) {
    popoverStyle.display = 'none'
  } else {
    const elRect = el.getBoundingClientRect()
    const elComputedStyle = window.getComputedStyle(el, null)
    const rightOffset = parseInt(elComputedStyle.getPropertyValue('padding-right')) || 0
    const topOffset = parseInt(elComputedStyle.getPropertyValue('padding-top')) || 0

    popoverStyle.visibility = 'hidden'
    popoverStyle.display = 'block'
    popover.querySelector('.popover-content').textContent = title
    popoverStyle.left = elRect.left - popover.offsetWidth / 2 + (el.offsetWidth - rightOffset) / 2 + 'px'
    popoverStyle.top = elRect.top - popover.offsetHeight + topOffset + 'px'
    popoverStyle.display = 'block'
    popoverStyle.visibility = 'visible'
  }
}

function getPopover() {
  let popover = document.querySelector('.title-popover')

  if (!popover) {
    const tpl = `
      <div class="popover title-popover top fade in" style="position:fixed;">
        <div class="arrow"></div>
        <div class="popover-content"></div>
      </div>
    `
    const fragment = document.createRange().createContextualFragment(tpl)

    document.body.appendChild(fragment)
    popover = document.querySelector('.title-popover')
  }

  return popover
}
export default {
  bind(el, binding, vnode) {
    // 使用 const 聲明一個只讀的常量，其值是需要監聽的事件類型列表
    const events = ['mouseenter', 'mouseleave', 'click']
    // 聲明一個處理器，以根據不同的事件類型傳不同的參數
    const handler = (event) => {
      if (event.type === 'mouseenter') {
        // 顯示一個提示框
        showTitle(el, binding.value)
      } else {
        // 隱藏一個提示框
        showTitle()
      }
    }

    // 在 el 元素上添加事件監聽
    events.forEach((event) => {
      el.addEventListener(event, handler, false)
    })

    // 在 el 元素上添加一個屬性，以在其他鈎子進行訪問
    el.destroy = () => {
      // 移除 el 元素上的事件監聽
      events.forEach((event) => {
        el.removeEventListener(event, handler, false)
      })
      // 移除 el 元素上的 destroy
      el.destroy = null
    }
  },
  unbind(el) {
    // 移除事件監聽和數據綁定
    el.destroy()
  }
}

使用步驟：

1.建立指令；

2.在要使用的組件中引入並注冊指令

import title from '@/directives/title'
directives: {
  title
}

3.頁面中使用，將原來的:title=""改為v-title:

<a v-for="item in contacts" v-title="item.title" :href="item.link" :style="contactStyle" target="_blank">
  <i :class="`fa fa-${item.icon}`"></i>
</a>

指令的基礎知識補充：

一個指令定義對象可以提供如下幾個鈎子函數（均為可選）：

• bind：只調用一次，指令第一次綁定到元素時調用，在這里可以進行一次性的初始化設置；
• inserted：被綁定元素插入父節點時調用；
• update：所在組件的 VNode（虛擬節點）更新時調用，但是可能發生在其子 VNode 更新之前；
• componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調用；
• unbind：只調用一次，指令與元素解綁時調用，在這里可以移除綁定的事件和其他數據；

• 指令鈎子函數會被傳入以下參數：

  • el：指令所綁定的元素，可以用來操作 DOM ；
  • binding：一個對象，binding.value 表示指令的綁定值，如 v-title="'我是標題'" 中，綁定值為'我是標題'；
  • vnode：Vue 編譯生成的虛擬節點；
  • oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鈎子中可用。