在 Vue，除了核心功能默認(rèn)內(nèi)置的指令 ( v-model 和 v-show )，Vue 也允許注冊(cè)自定義指令。它的作用價(jià)值在于當(dāng)開(kāi)發(fā)人員在某些場(chǎng)景下需要對(duì)普通 DOM 元素進(jìn)行操作。
Vue自定義指令有全局注冊(cè)和局部注冊(cè)兩種方式。先來(lái)看看注冊(cè)全局指令的方式，通過(guò) Vue.directive( id, [definition] ) 方式注冊(cè)全局指令。然后在入口文件中進(jìn)行 Vue.use() 調(diào)用。
批量注冊(cè)指令，新建 directives/index.js 文件

import copy from './copy'
import longpress from './longpress'
// 自定義指令
const directives = {
  copy,
  longpress,
}
 
export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key])
    })
  },
}

在 main.js 引入并調(diào)用

import Vue from 'vue'
import Directives from './JS/directives'
Vue.use(Directives)

指令定義函數(shù)提供了幾個(gè)鉤子函數(shù)（可選）：

bind: 只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用，可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作。
inserted: 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用，不必存在于 document 中）。
update: 被綁定元素所在的模板更新時(shí)調(diào)用，而不論綁定值是否變化。通過(guò)比較更新前后的綁定值。
componentUpdated: 被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。
unbind: 只調(diào)用一次， 指令與元素解綁時(shí)調(diào)用。

下面分享幾個(gè)實(shí)用的 Vue 自定義指令

復(fù)制粘貼指令 v-copy
長(zhǎng)按指令 v-longpress
輸入框防抖指令 v-debounce
禁止表情及特殊字符 v-emoji
圖片懶加載 v-LazyLoad
權(quán)限校驗(yàn)指令 v-premission
實(shí)現(xiàn)頁(yè)面水印 v-waterMarker
拖拽指令 v-draggable

v-copy
需求：實(shí)現(xiàn)一鍵復(fù)制文本內(nèi)容，用于鼠標(biāo)右鍵粘貼。
思路：

動(dòng)態(tài)創(chuàng)建 textarea 標(biāo)簽，并設(shè)置 readOnly 屬性及移出可視區(qū)域
將要復(fù)制的值賦給 textarea 標(biāo)簽的 value 屬性，并插入到 body
選中值 textarea 并復(fù)制
將 body 中插入的 textarea 移除
在第一次調(diào)用時(shí)綁定事件，在解綁時(shí)移除事件

const copy = {
  bind(el, { value }) {
    el.$value = value
    el.handler = () => {
      if (!el.$value) {
        // 值為空的時(shí)候，給出提示?？筛鶕?jù)項(xiàng)目UI仔細(xì)設(shè)計(jì)
        console.log('無(wú)復(fù)制內(nèi)容')
        return
      }
      // 動(dòng)態(tài)創(chuàng)建 textarea 標(biāo)簽
      const textarea = document.createElement('textarea')
      // 將該 textarea 設(shè)為 readonly 防止 iOS 下自動(dòng)喚起鍵盤，同時(shí)將 textarea 移出可視區(qū)域
      textarea.readOnly = 'readonly'
      textarea.style.position = 'absolute'
      textarea.style.left = '-9999px'
      // 將要 copy 的值賦給 textarea 標(biāo)簽的 value 屬性
      textarea.value = el.$value
      // 將 textarea 插入到 body 中
      document.body.appendChild(textarea)
      // 選中值并復(fù)制
      textarea.select()
      const result = document.execCommand('Copy')
      if (result) {
        console.log('復(fù)制成功') // 可根據(jù)項(xiàng)目UI仔細(xì)設(shè)計(jì)
      }
      document.body.removeChild(textarea)
    }
    // 綁定點(diǎn)擊事件，就是所謂的一鍵 copy 啦
    el.addEventListener('click', el.handler)
  },
  // 當(dāng)傳進(jìn)來(lái)的值更新的時(shí)候觸發(fā)
  componentUpdated(el, { value }) {
    el.$value = value
  },
  // 指令與元素解綁的時(shí)候，移除事件綁定
  unbind(el) {
    el.removeEventListener('click', el.handler)
  },
}
 
export default copy

使用：給 Dom 加上 v-copy 及復(fù)制的文本即可

<template>
  <button v-copy="copyText">復(fù)制</button>
</template>
 
<script> export default {
    data() {
      return {
        copyText: 'a copy directives',
      }
    },
  } </script>

剩余的請(qǐng)看原文

作者：MK麥客
鏈接：https://juejin.cn/post/7067051410671534116
來(lái)源：稀土掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。