Vue中按钮的权限控制

最新推荐文章于 2025-10-22 10:10:40 发布

原创最新推荐文章于 2025-10-22 10:10:40 发布 · 380 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在Vue项目中利用自定义指令和Vuex管理按钮权限的方法。通过创建store.js设置state中的buttonPermission状态，然后在has.js中检查该状态决定是否显示按钮。在index.vue中引入并使用自定义指令v-has，根据v-has的值动态控制按钮的显示与否。

利用自定义指令与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>