【实用】整理常用的vue自定义指令

“ vue自定义指令实例。”

​自定义指令参数详解：

• bind：只调用一次，指令第一次绑定到元素时调用，可以定义一个在绑定时执行一次的初始化动作

• inserted：被绑定元素插入父节点时调用

• update：被绑定元素所在的模板更新时调用，但是可能发生在其子 VNode 更新之前

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

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

 

1、v-focus 元素获得焦点

我们先来看一个vue官网的例子

需求：页面加载完成后，元素自动获取焦点

<input v-focus placeholder="自动获取焦点"></input>

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

2、v-permission 按钮权限

背景：在管理后台中，经常需要根据登录的角色来控制按钮操作权限

需求：自定义一个指令，对需要用权限来控制的DOM，显示或隐藏DOM

<button v-permission="'edit'">修改</button>

Vue.directive('permission', {
  inserted: (el, binding) => {
    // 获取登录用户权限列表
    let funList = store.state.permissi