vue項目中實用的自定義指令

在咱們開發過程當中，有些處理起來很是麻煩的小功能，用自定義指令可能很是簡單就能實現。首先看下vue官網關於自定義指令的介紹：

簡介

除了核心功能默認內置的指令 (v-model 和 v-show)，Vue 也容許註冊自定義指令。注意，在 Vue2.0 中，代碼複用和抽象的主要形式是組件。然而，有的狀況下，你仍然須要對普通 DOM 元素進行底層操做，這時候就會用到自定義指令。舉個聚焦輸入框的例子。

當頁面加載時，該元素將得到焦點。只要你在打開這個頁面後還沒點擊過任何內容，這個輸入框就應當仍是處於聚焦狀態。如今讓咱們用指令來實現這個功能：

基礎用法

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

// template
<input v-focus>
複製代碼

除了能夠在vue的全局註冊全局的自定義指令，vue也支持在組件內註冊組建的自定義指令。

鉤子函數

一個指令定義對象能夠提供以下幾個鉤子函數 (均爲可選)：

bind：只調用一次，指令第一次綁定到元素時調用。在這裏能夠進行一次性的初始化設置。

inserted：被綁定元素插入父節點時調用 (僅保證父節點存在，但不必定已被插入文檔中)。

update：所在組件的 VNode 更新時調用，可是可能發生在其子 VNode 更新以前。指令的值可能發生了改變，也可能沒有。可是你能夠經過比較更新先後的值來忽略沒必要要的模板更新 (詳細的鉤子函數參數見下)。

componentUpdated：指令所在組件的 VNode 及其子 VNode 所有更新後調用。

unbind：只調用一次，指令與元素解綁時調用。

鉤子函數參數

指令鉤子函數會被傳入如下參數：

el：指令所綁定的元素，能夠用來直接操做 DOM。

binding：一個對象，包含如下 property：

name：指令名，不包括 v- 前綴。
value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值爲 2。
oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。不管值是否改變均可用。
expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式爲 "1 + 1"。
arg：傳給指令的參數，可選。例如 v-my-directive:foo 中，參數爲 "foo"。
modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象爲 { foo: true, bar: true }。
複製代碼

vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。

oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

在項目中的使用

在咱們開發後臺管理系統過程當中，會常常遇到這樣的需求，根據這個用戶的權限或者類型，來控制某個按鈕顯不顯示，好比審批按鈕、下載按鈕，實現方式很是多，這個地方就能夠用自定義指令來實現。

能夠給用戶加一個標記，好比userType，也能夠根據用戶的角色，好比有某個審批角色的用戶，也能夠根據用戶是否有某個菜單權限來控制，這裏就以根據用戶是否有某個角色來控制

首先建立一個全局的自定義指令：

Vue.directive('has', {
  // 當被綁定的元素插入到 DOM 中時……
  inserted: function(el, binding) {
    var sysRoles = store.state.user.sysRoles
    if (!sysRoles) return false
    var isHas = sysRoles.some(e => {
      return e.id === 1
    })
    !isHas ? el.style.display = 'none' : el.style.display = 'inline-block'
  }
})
複製代碼

當某個角色的id等於1的時候，顯示按鈕，不然不顯示

<el-button v-has="" type="primary" size="small>審批</el-button>
複製代碼

全局均可以使用，一個標籤就能夠實現業務功能

實用插件

網上有很是多很是實用的自定義指令，這裏推薦經常使用的兩款

v-clipboard（點擊複製內容到粘貼板功能）

在咱們開發後臺管理系統的時候，實現點擊表格的某一項，複製到粘貼板的功能。

一、安裝

npm install --save v-clipboard
複製代碼

二、引用

import Vue from 'vue'
import Clipboard from 'v-clipboard'

Vue.use(Clipboard)
複製代碼

三、table組件中使用

<el-table-column label="姓名" align="center">
  <template slot-scope="scope">
    <div @click="handleCopy(scope.row.name)">{{ scope.row.name }}</div>
  </template>
</el-table-column>
複製代碼

四、mixins中建立一個全局的方法

在全局的mixins裏面建立一個方法

var mixins = {
  data() {
    return {
    }
  },
  methods: {
    handleCopy(value) {
      this.$clipboard(value)
      this.$message.success('已複製到粘貼板')
    }
  }
}
export default mixins
複製代碼

五、完成

項目是基於自定義指令實現的，有興趣的能夠關注一下項目源碼：

github.com/euvl/v-clip…

Vue-Lazyload（圖片懶加載）

demo地址：hilongjw.github.io/vue-lazyloa…

源碼地址：github.com/hilongjw/vu…

很是簡單實用的圖片懶加載工具

一、安裝

npm install --save vue-lazyload
複製代碼

二、引用

import loading from './assets/common/loading.gif'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
  preload: .8,
  loading,
  // error,
})
複製代碼

三、使用

<img v-lazy="https://www.domain.com/image.jpg">
複製代碼

能夠很是簡單的實現圖片懶加載

vue確實有不少很是實用的小技巧能幫助咱們提升開發效率，提高用戶體驗，多看大神的開源代碼，對咱們找到最合適的解決方案提高會很大。