徐徐爱coding
  • 首页
  • 爱情买卖
  • 导航
  • 私语
  • 友情链接
  • 关于
    关于本站
    知识库
    弹钢琴
徐徐爱coding

徐徐爱coding

徐徐爱coding是一个个人博客站点,记录编程经历的点点滴滴,分享自己的所见与所得,坚持自己的初心,践行自己的梦想生活不是等着暴风雨过去,而是学会在风雨中跳舞!

Copyright © 2023 徐徐爱coding All Rights Reserved.
陕公网安备61019602000456陕ICP备2023007787号-2

网站已稳定运行

vue指令实现按钮权限

vue指令实现按钮权限

徐徐
前端
#Vue
0 热度0 评论0 点赞
发布于2024-08-24 17:07:35
🌺前言
vue3使用vue自定义指令控制按钮权限

typescript
// 引入vue中定义的指令对应的类型定义
import { usePermissionStore } from '@/store/permission';
import { Directive } from 'vue';

export const permission: Directive = {
    // mounted是指令的一个生命周期
    mounted(el, binding) {
        // value 获取用户使用自定义指令绑定的内容
        const { value } = binding;
        // 获取用户所有的权限按钮
        const permissionStore = usePermissionStore();
        // 判断用户使用自定义指令,是否使用正确了
        if (value && value instanceof Array && value.length > 0) {
            const isHasPermission = permissionStore.hasPermission(value);
            // 当用户没有这个按钮权限时,设置隐藏这个按钮
            if (!isHasPermission) {
                el.parentNode.removeChild(el);
            }
        } else {
            throw new Error(
                "need roles! Like v-permission=\"['admin','editor']\"",
            );
        }
    },
};
文章最后更新于 2024-08-24 17:08:24
作者:徐徐
版权声明:转载请注明文章出处
留言
暂无数据

~~空空如也