关于前端:Vue3中用自定义指令拦截点击事件点击事件添加权限

案例应用Vue3举例,如在Vue2中应用思路是统一的，语法稍有区别。

问题

某些利用场景会给点击事件增加权限，不存在权限就 拦挡 点击事件（或触发其余业务事件），有权限就持续失常 触发 点击事件。如果用封装组件的办法，在应用三方UI库的状况下，封装老本过大，并不划算。

解决方案案例

逻辑

main.ts

// main.ts // 举例案例 间接在初始化为全局自定义指令import { createApp } from "vue";import "./style.css";import App from "./App.vue";import router from "./router/router";import * as echarts from 'echarts';import ElementPlus from 'element-plus';import 'element-plus/dist/index.css';const app = createApp(App);app.use(router);app.use(ElementPlus)// 逻辑封装const customClick = (binding: any) => {    return () =>{        if (true) { // 判断条件            // 失常触发点击事件            binding.value();        } else {            // 曾经胜利拦挡点击事件            console.log('曾经胜利拦挡点击事件');        };    };};// 全局自定义指令app.directive('custom',{    created(el, binding, vnode, prevVnode) {        el.addEventListener('click', customClick(binding));    },    // 来到肯定要销毁卸载    unmounted(el, binding, vnode) {        el.removeEventListener('click', customClick);    },});app.mount("#app");

页面中的应用

<template><!--函数不带括号--><button v-custom="onClick">test按钮</button><el-button type="primary" v-custom="onClickTest1">Primary</el-button><!--函数带括号 可传值--><button v-custom="() => onClick()">test按钮</button><el-button type="primary" v-custom="() => onClickTest1(233)">Primary</el-button></template>

<script lang="ts" setup >const onClick = () => {    console.log('_____函数不带括号');};const onClickTest1 = (num: number) => {    console.log('_____函数带括号 可传值');};</script>

逻辑封装还存在优化点,后续在继续优化。