按钮级别的权限

通过directives(vue自定义指令)来控制按钮的权限

1. 首先store/index.js里定义好参数
2. 创建一个directive/has.js自定义指令文件
3. 在组件中引用，并且传参

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    buttonPermission: {
      add: true,
      edit: true,
      delete: false
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

 directives/has.js

export default {
  inserted(el, bindings, vnode) {
    // console.log('进入dom结构了');
    // console.log(vnode)
    let btnPremissionValue = bindings.value;
    let flag = vnode.context.$store.state.buttonPermission[btnPremissionValue]
    !flag && el.parentNode.removeChild(el)
  }
}

组件内引用

<template>
  <div class="home">
    <h1>vue按钮级别的权限控制</h1>
    <el-button v-has="'add'">编辑</el-button>
    <el-button v-has="'edit'">添加</el-button>
    <el-button v-has="'delete'">删除</el-button>
  </div>
</template>

<script>

import has from '../directives/has'
export default {
  name: 'Home',
  directives:{
    has
  },
  data(){
    return {
      msg:'Welcome to Your Vue.js App'
    }
  }
}
</script>