vue權限指令
vue項目將后端返回的權限數據存儲到vuex中，并根據不同權限展示不同內容。
directive.js
import Vue from 'vue';
Vue.directive('rule', {
//在綁定元素插入父元素生命周期觸發(fā)
inserted: function (el, bind, vnode) {
//自定義指令中無法使用this獲取vue實例，但是vnode綁定在實例上下文，所以使用vnode.context可以解決這個問題。
let rule = vnode.context.$store.state.rule;
//bind.vlaue獲取到你使用該自定義指令綁定的值
if (!rule.includes(bind.value)) el.remove();
}
});
main.js
//單獨文件中自定義全局指令必須在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>
