vue權(quán)限指令
vue項(xiàng)目將后端返回的權(quán)限數(shù)據(jù)存儲(chǔ)到vuex中鸣个，并根據(jù)不同權(quán)限展示不同內(nèi)容仗考。
directive.js
import Vue from 'vue';
Vue.directive('rule', {
//在綁定元素插入父元素生命周期觸發(fā)
inserted: function (el, bind, vnode) {
//自定義指令中無法使用this獲取vue實(shí)例臀突，但是vnode綁定在實(shí)例上下文港谊，所以使用vnode.context可以解決這個(gè)問題。
let rule = vnode.context.$store.state.rule;
//bind.vlaue獲取到你使用該自定義指令綁定的值
if (!rule.includes(bind.value)) el.remove();
}
});
main.js
//單獨(dú)文件中自定義全局指令必須在main.js中引用
import './utils/directive'
menu.vue
<template>
<ul>
<li v-for="(item,index) in rules" v-rule="item" :v-key="index">
{{item}}
</li>
</ul>
</template>
<script>
export default {
data: () => ({
rules: ["index", "app", "pc"]
}),
};
</script>
參考文獻(xiàn):https://mp.weixin.qq.com/s/McsEsb7rGVy6IOTfWM0gRg
