Vue實現自定義指令（directive）及應用場景

這是我參與更文挑戰的第 2 天，活動詳情查看：更文挑戰javascript

1.1 鉤子函數

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

bind

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

inserted

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

update

所在組件的 VNode 更新時調用，可是可能發生在其子 VNode 更新以前。指令的值可能發生了改變，也可能沒有。node

componentUpdated

指令所在組件的 VNode 及其子 VNode 所有更新後調用。vue-cli

unbind

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

Vue.directive('gqs',{
    bind() {
      // 當指令綁定到 HTML 元素上時觸發.**只調用一次**
      console.log('bind triggerd')
    },
    inserted() {
      // 當綁定了指令的這個HTML元素插入到父元素上時觸發(在這裏父元素是 `div#app`)**.但不保證,父元素已經插入了 DOM 文檔.**
      console.log('inserted triggerd')
    },
    updated() {
      // 所在組件的`VNode`更新時調用.
      console.log('updated triggerd')
    },
    componentUpdated() {
      // 指令所在組件的 VNode 及其子 VNode 所有更新後調用。
      console.log('componentUpdated triggerd')
      
    },
    unbind() {
      // 只調用一次，指令與元素解綁時調用.
      console.log('unbind triggerd')
    }
  })
複製代碼

1.2 鉤子函數參數

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

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

binding 一個對象，包含如下屬性：session

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 編譯生成的虛擬節點。
oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

除了 el 以外，其它參數都應該是隻讀的，切勿進行修改。若是須要在鉤子之間共享數據，建議經過元素的 dataset 來進行。

1.3 指令簡寫

當綁定指令的元素的狀態發生改變時(這裏主要是指元素綁定的vue數據發生改變時),仍然會觸發指令中的 update 函數. 那麼咱們能夠利用指令的簡寫形式,來作一些有意思的事情.

核心思想就是: 當一個HTML元素設置了指令,那麼在這個元素的狀態發生改變時(由vue數據變化帶來的帶來的監控),咱們能夠利用update()鉤子函數監控到這個元素的變化,而後根據須要作一些其餘的事情.

案例：使用官方指定的指令簡寫模式:

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})
複製代碼

當元素的狀態發生改變時,就會觸發 update

1.4 小結幾點

使用 Vue.directive() 來新建一個全局指令,(指令使用在HTML元素屬性上的)
Vue.directive('focus') 第一個參數focus是指令名,指令名在聲明的時候,不須要加 v-
在使用指令的HTML元素上,咱們須要加上 v-.

<input type="text" v-focus placeholder="我有v-focus,因此,我獲取了焦點"/> 
複製代碼

Vue.directive('focus',{}) 第二個參數是一個對象,對象內部有個 inserted() 的函數,函數有 el 這個參數.
- el 這個參數表示了綁定這個指令的 DOM元素,在這裏就是後面那個有 placeholder 的 input
- el 就等價於 document.getElementById('el.id')....
- 能夠利用 $(el) 無縫鏈接 jQuery

2. vue-cli中定義全局指令

2.1 main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 若是你只須要執行綁定的 bind 和 update 兩個事件,vue指令定義也配置了簡寫方式.
Vue.directive('my-color',(el) => {
  el.style.color = 'red'
  el.style.backgroundColor = 'yellow'
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
複製代碼

2.2 相應組件

<template>
  <input type="text" v-my-color> </template>
複製代碼

2.3 實現效果

3. vue-cli中定義局部指令

3.1 相應組件

<template>
	<input type="text" v-model="text" placeholder="僅可填入正整數數字" v-my-text="{key:'text',maxval:'1000'}"> </template>
<script> export default { data(){ return { text:'', } }, directives:{ myText:{ bind(el,binding,vnode) { el.handler = function() { el.value = el.value.replace(/\D+/g, '') //根據設置的規則，進行判斷處理 if(binding.value.maxval && el.value > parseInt(binding.value.maxval)){ el.value = parseInt(binding.value.maxval); } //根據指令調取位置設置的規則Key，進行全局上文賦值 vnode['context'][binding.value.key] = el.value; } el.addEventListener('input', el.handler) }, }, } } </script>
複製代碼

3.2 簡寫模式

<template>
	<input type="text" v-model="text" placeholder="僅可填入正整數數字" v-my-text="{key:'text',maxval:'1000'}"> </template>
<script> export default { data(){ return { text:'', } }, directives:{ myText:(el,binding,vnode) => { el.handler = function() { el.value = el.value.replace(/\D+/g, '') //根據設置的規則，進行判斷處理 if(binding.value.maxval && el.value > parseInt(binding.value.maxval)){ el.value = parseInt(binding.value.maxval); } //根據指令調取位置設置的規則Key，進行全局上文賦值 vnode['context'][binding.value.key] = el.value; } el.addEventListener('input', el.handler) }, }, } </script>
複製代碼

4. 應用場景

傳送門：指令在 Element-ui 中選擇器（Select）中的使用

4.1 自動獲取焦點（官方示例）

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

4.2 一鍵 Copy的功能

首先建一個 js 文件（v-copy.js）。定義一個對象。（指令實際就是一個對象）

import { Message } from 'ant-design-vue';

const vCopy = { // 名字愛取啥取啥
  /* bind 鉤子函數，第一次綁定時調用，能夠在這裏作初始化設置 el: 做用的 dom 對象 value: 傳給指令的值，也就是咱們要 copy 的值 */
  bind(el, { value }) {
    el.$value = value; // 用一個全局屬性來存傳進來的值，由於這個值在別的鉤子函數裏還會用到
    el.handler = () => {
      if (!el.$value) {
      // 值爲空的時候，給出提示，我這裏的提示是用的 ant-design-vue 的提示，大家隨意
        Message.warning('無複製內容');
        return;
      }
      // 動態建立 textarea 標籤
      const textarea = document.createElement('textarea');
      // 將該 textarea 設爲 readonly 防止 iOS 下自動喚起鍵盤，同時將 textarea 移出可視區域
      textarea.readOnly = 'readonly';
      textarea.style.position = 'absolute';
      textarea.style.left = '-9999px';
      // 將要 copy 的值賦給 textarea 標籤的 value 屬性
      textarea.value = el.$value;
      // 將 textarea 插入到 body 中
      document.body.appendChild(textarea);
      // 選中值並複製
      textarea.select();
      // textarea.setSelectionRange(0, textarea.value.length);
      const result = document.execCommand('Copy');
      if (result) {
        Message.success('複製成功');
      }
      document.body.removeChild(textarea);
    };
    // 綁定點擊事件，就是所謂的一鍵 copy 啦
    el.addEventListener('click', el.handler);
  },
  // 當傳進來的值更新的時候觸發
  componentUpdated(el, { value }) {
    el.$value = value;
  },
  // 指令與元素解綁的時候，移除事件綁定
  unbind(el) {
    el.removeEventListener('click', el.handler);
  },
};

export default vCopy;
複製代碼

到這裏，一鍵 Copy 的功能就實現了，最後再說一嘴怎麼將自定義指令註冊到全局：再新建一個 js （ directives.js ）文件來註冊全部的全局指令。

import copy from './v-copy';
// 自定義指令
const directives = {
  copy,
};
// 這種寫法能夠批量註冊指令
export default {
  install(Vue) {
    Object.keys(directives).forEach((key) => {
      Vue.directive(key, directives[key]);
    });
  },
};
複製代碼

3.最後，在 main.js 中這樣引入

import Vue from 'vue';
import Directives from './directives';

Vue.use(Directives);
複製代碼

4.3 按鈕級別權限控制

權限控制分爲頁面級別和按鈕級別，這兩種思路基本是一致的。

頁面級別：用戶登陸後，獲取用戶role，將role和路由表每一個頁面的須要的權限做比較，生成最終用戶可訪問的路由表。最後經過router.addRoutes動態掛載。如今是經過獲取到用戶的role以後，在前端用v-if手動判斷來區分不一樣權限對應的按鈕的。

按鈕級別：用戶登陸後，獲取用戶role，在前端用 v-if 或者封裝一個自定義指令，手動判斷來區分不一樣權限對應的按鈕的。

思路：

登陸：當用戶填寫完帳號和密碼後向服務端驗證是否正確，驗證經過以後，服務端會返回一個token，拿到token以後（將token存貯到sessionStorage中，保證刷新頁面後能記住用戶登陸狀態），前端會根據token再去拉取一個 user_info 的接口來獲取用戶的詳細信息（如用戶角色，用戶權限，用戶名等等信息）。

權限驗證：經過token獲取用戶對應的role，自定義指令，獲取路由meta屬性裏btnPermissions(注：meta.btnPermissions是存放按鈕權限的數組，在路由表裏配置)，而後判斷role是否在btnPermissions數組裏，若不在即刪除該按鈕DOM。

路由配置：

path: '/permission',
component: Layout,
name: '權限測試',
meta: { btnPermissions: ['admin','supper','normal'] }, //頁面須要的權限
children: [
    {
        path: 'supper',
        component: _import('system/supper'),
        name: '權限測試頁',
        meta: { btnPermissions: ['admin','supper'] }  //頁面須要的權限
    },
    {
        path: 'normal',
        component: _import('system/normal'),
        name: '權限測試頁',
        meta: { btnPermissions: ['admin'] }  //頁面須要的權限
    }
]
複製代碼

自定義指令：

import Vue from 'vue'
    
/**權限指令**/
const has = Vue.directive('has', {
    bind: function (el, binding, vnode) {
        // 獲取頁面按鈕權限
        let btnPermissionsArr = vnode.context.$route.meta.btnPermissions;
        if (!Vue.prototype.$_has(btnPermissionsArr)) {
            el.parentNode.removeChild(el);
        }
    }
});
// 權限檢查方法
Vue.prototype.$_has = function (value) {
    let isExist = false;
    // 獲取用戶按鈕權限
    let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
    if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
        return false;
    }
    if (value.indexOf(btnPermissionsStr) > -1) {
        isExist = true;
    }
    return isExist;
};
export {has}
複製代碼

在main.js文件引入文件：

import has from './public/js/btnPermissions.js';
複製代碼

頁面中按鈕只需加v-has便可：

<el-button @click='editClick' type="primary" v-has>編輯</el-button>
複製代碼