权限-按钮
描述：在具体的某个页面，根据不同的用户身份判断是否展示(控制显示与隐藏) 例子：🌰在A页面，有一个提交按钮，['student']的用户展示出来,['teacher']的用户不展示
使用V-If方式
v-if
<template>
<div>
<button v-if="isCheck(['admin'])">按钮B</button>
</div>
</template>
<script>
import { check } from "../utils";
export default {
methods: {
isCheck(authority) {
return check(authority);
},
},
};
</script>
使用抽象函数组件
<template>
<div>
<button v-auth="['admin', 'other']">按钮权限</button>
</div>
</template>
<script>
import { check, isArray } from "../utils";
export default {
directives: {
auth: {
inserted(el, binding, vnode) {
let parentNode = el.parentNode;
if (binding.value && isArray(binding.value)) {
if (!check(binding.value)) {
parentNode.removeChild(el);
}
} else {
parentNode.removeChild(el);
}
},
},
},
};
</script>
使用自定义指令方式
<script>
import { check } from "../utils";
export default {
functional: true,
name: "Authorized",
props: {
authority: {
type: Array,
required: true,
},
},
render(h, context) {
const { props, scopedSlots } = context;
return check(props.authority) ? scopedSlots.default() : null;
},
};
</script>
