模拟元素的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 钩子中可用。