这里记录下,自定义指令相关思路,用到 vue3 + element plus:

说明一下使用场景:创建自定义指令 v-hasPermi , 用来判断按钮权限的(新增/编辑/删除/查看等)。

1. 页面使用(全局使用,无需引入):

<el-button type="primary" icon="Plus" plain v-hasPermi="['bid:bidding:save']">添加</el-button>  // 此处是单个权限码,支持多个权限码list:  v-hasPermi="['bid:bidding:publishs', 'bid:bidding:edit', 'bid:bidding:remove']"

2. 实现思路:

src 路径下,创建文件夹 directive , 表示存放项目所有的自定义指令文件。

这里拿 permission/hasPermi.js 举例:

/**
 * v-hasPermi 操作权限处理
 */
import useUserStore from '@/store/modules/user';
export default {
    mounted(el, binding, vnode) {
        const { value } = binding;
        const all_permission = '*:*:*';
        const permissions = useUserStore().permissions;   // 用户权限列表

        if (value && value instanceof Array && value.length > 0) {
            const permissionFlag = value;

            const hasPermissions = permissions.some((permission) => {
                return all_permission === permission || permissionFlag.includes(permission);
            });

            if (!hasPermissions) {
                el.parentNode && el.parentNode.removeChild(el);
            }
        } else {
            throw new Error(`请设置操作权限标签值`);
        }
    },
};

directive的index.js 文件,默认导出:

import hasRole from './permission/hasRole';
import hasPermi from './permission/hasPermi';
import copyText from './common/copyText';

export default function directive(app) {
    app.directive('hasRole', hasRole);
    app.directive('hasPermi', hasPermi);
    app.directive('copyText', copyText);
}

在项目主入口文件 main.js里面注册绑定:

import App from './App';
import directive from './directive'; // directive

const app = createApp(App);
directive(app);

 

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。