vue自定义指令(directive)---讲解与实例

vue中有很多内置的指令，如v-model、v-text、v-show、v-html等，但是随着开发项目的增多，各种需求不断增多，这些指令并不能满足所有的开发需求，这时候就需要我们自定义指令来满足，请看下面：

1.自定义指令类型

a.全局自定义指令（如下：）

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

b.局部指令，组件中接受一个 directives 的选项(如下：)

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

2.钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

• inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

• update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode
  更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

• componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

• unbind：只调用一次，指令与元素解绑时调用。

3.举例说明

开发中常见的权限问题，例如：通过权限控制button的显示隐藏

import Vue from 'vue'

const has = Vue.directive('has', {
  inserted: function (el, binding, vnode) {
  	// 通过自定义指令（v-has）绑定的权限
    const permissionId = binding.value
    // 模拟数据权限（权限白名单）
    const permissions = ['sys:user:save', 'sys:site:read', 'sys:admin:read']
    if (!permissions.includes(permissionId)) {
    // 判单是否在权限白名单内，若不存在则隐藏
      el.parentNode && el.parentNode.removeChild(el) || (el.style.display = 'none')
    }
  }
})

Vue.use(has)

自定义指令引用：

// 权限在白名单中，按钮展示
<a-button v-has='sys:user:save' type="primary" @click="save">保存</a-button>

// 权限不在白名单中，按钮隐藏
<a-button v-has='sys:user:cancel' type="primary" @click="cancel">取消</a-button>