vue自定义指令

lxf2023-02-18 14:41:50
在vue按钮权限控制中使用自定义指令
在src下新建文件夹directive/index.js
 
// 放置全局指令
import Vue from 'vue'
import store from '@/store'

// v-access
Vue.directive('access', {
  // 组件初始化时,会执行一次,它里面不能拿到父亲dom节点
  bind(el, binding) {},
  // 该指令绑定的数据发生变化时,会执行
  update(el, binding) {},
  // 组件初始化时,会执行一次,它里面能够拿到父亲dom节点
  inserted(el, binding) {
    console.log(el);
    console.log(binding);
    // 获取用户的按钮权限数据
    const points = store.state.user.userInfo.roles.points
    // points = ['CKGZ', 'ZGZ']
    if (!points.includes(binding.value)) {
      // 用户没有该按钮权限,隐藏该按钮
      el.parentNode.removeChild(el) // v-if
      // el.style.display = 'none'  // v-show
    }
  }
})