Vue中按钮的权限控制

利用自定义指令与vuex来实现

首先，在src目录下的view文件夹中创建index.vue、然后创建directives文件夹，在其中新建has.js，创建store.js。

store.js:

设置state中的状态。

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

Vue.use(Vuex)

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

has.js：

获取state中的状态，如果为false就移除当前节点。

export default{
    inserted(el, bindings, vnode){
        let btnPermissionValue = bindings.value
        let boolean = vnode.context.$store.state.buttonPermission[btnPermissionValue]
        !boolean && el.parentNode.removeChild(el)
    }
}

index.vue：

引入自定义指令文件，在directives中挂载自定义指令has，并在标签中写入。

<template>
    <div>
        <button v-has="'add'">增加</button>
        <button v-has="'edit'">修改</button>
        <button v-has="'delete'">删除</button>
    </div>
</template>

<script>
import has from '../directives/has.js'   
export default {
    components: {
    },
    directives:{
        has
    }
};
</script>

<style scoped>
</style>