指令

想要了解自定義指令，那肯定得先明白什么是指令。

指令的本質(zhì)：語(yǔ)法糖，標(biāo)志位。在編譯階段 render 函數(shù)里，會(huì)把指令編譯成 JavaScript 代碼。

常見(jiàn)的Vue內(nèi)置指令有：

• v-on 即 @。v-on:click=”function“， 縮寫(xiě)為@click=”function“
• v-if
• v-for
• v-html
• ……

所以指令就是跟我們的元素標(biāo)簽綁定在一起的某些事件，當(dāng)我們dom組件在一定條件下就會(huì)觸發(fā)相對(duì)應(yīng)的指令。

自定義指令

先看看Vue官方的說(shuō)法：

除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)，Vue 也允許注冊(cè)自定義指令。注意，在 Vue2.0 中，代碼復(fù)用和抽象的主要形式是組件。然而，有的情況下，你仍然需要對(duì)普通 DOM 元素進(jìn)行底層操作，這時(shí)候就會(huì)用到自定義指令

指令的自定義即我們按照Vue制定的規(guī)則去編寫(xiě)一套可以對(duì)dom進(jìn)行操作的功能函數(shù)，然后就能與其他Vue的內(nèi)置指令一樣具有一定的功能效果。指令相當(dāng)于簡(jiǎn)化了我們對(duì)dom的操作，可以快速進(jìn)行dom的事件處理，當(dāng)然我們應(yīng)該盡量減少使用一些容易消耗瀏覽器資源的指令。

關(guān)于注冊(cè)自定義指令

全局注冊(cè)

// 注冊(cè)一個(gè)全局自定義指令 `v-focus`
Vue.directive('focus', {
  // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

局部注冊(cè)

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

自定義指令的鉤子函數(shù)

bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。

inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。

update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒(méi)有。但是你可以通過(guò)比較更新前后的值來(lái)忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見(jiàn)下)。

componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。

unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

封裝自定義指令

通過(guò)以上的描述，相信大多數(shù)人大概對(duì)自定義指令以及指令都有了一定的理解，已經(jīng)可以開(kāi)始編寫(xiě)一些簡(jiǎn)單不重復(fù)的指令。但是面對(duì)一些復(fù)雜而且可能需要經(jīng)常使用到的自定義指令，這個(gè)時(shí)候我們最好還是把代碼進(jìn)行一層封裝，這樣可以方便我們后續(xù)的修改和有層次的代碼編寫(xiě)。

1.首先可以選擇在根目錄下新建文件夾directive

2.創(chuàng)建自定義指令的文件夾

3.文件夾下的index.js文件，例如實(shí)現(xiàn)一鍵復(fù)制文本內(nèi)容，用于鼠標(biāo)右鍵粘貼。

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)喚起鍵盤(pán)，同時(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

4.directive下需要有一個(gè)總管全局directive的文件，便于我們進(jìn)行全局注冊(cè)時(shí)的操作。

directive/index.js

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

5.全局進(jìn)行遍歷注冊(cè)，main.js.Vue.use函數(shù)會(huì)調(diào)用我們寫(xiě)好的install，相當(dāng)于運(yùn)行我們install里面的代碼

import Vue from 'vue'
import Directives from '@/directive'
Vue.use(Directives)

到此這篇關(guān)于Vue自定義指令深入探討實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue自定義指令內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論