Vue自定义创建标签

1.自定义权限指令

// 自定义权限指令

import store from '@/store'
export default {
  // 指令钩子
  inserted(el, binding) {
    // el:指定作用在那个元素上

    // 获取使用指令时传递的值
    const { value } = binding
    // 获取用户当前所拥有的所有按钮权限
    const buttonList = store.getters && store.getters.buttonList
    //  指令传递了值
    if (value) {
      // 产找按钮权限列表里面有没有传递的值
      const hasPermission = buttonList.some((button) => {
        return button === value
      })
      // 按钮权限列表里面没有传递的值
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      // 指令没有传递值
      throw new Error(`需要指定权限表示！比如 v-permission="'article:delete'"`)
    }
  }
}

2.给指令起名字

// 引入所有要注册的全局指令
import permission from './permission'

export default (Vue) => {
  // 参数一：指令名字   使用时需要加上v-
  Vue.directive('permission', permission)
}

3.main.js引入使用

import directive from './directive'
Vue.use(directive)