参考视频
- 在src下新建directives/has.js文件用来创建自定义指令
export default {
bind(el, bindings) {
const permissions = JSON.parse(localStorage.getItem('permissions'));
const needPermission = bindings.value;
const hasPermission = permissions.includes(needPermission);
if (!hasPermission) {
el.style.display = 'none';
setTimeout(() => {
el.parentNode.removeChild(el);
}, 0);
}
}
}
<template>
<div>
<button v-has="'add'">添加</button>
<button v-has="'edit'">编辑</button>
<button v-has="'delete'">删除</button>
</div>
</template>
<script>
import hasDirective from './directives/has';
export default {
name: 'App',
directives: {
has: hasDirective,
}
}
</script>