Vue3实现自定义指令拦截点击事件的示例代码

目录

• 问题
• 解决方案案例
• 逻辑
• 页面中的使用

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

问题

某些应用场景会给点击事件添加权限，不存在权限就 拦截 点击事件（或触发其他业务事件），有权限就继续正常 触发 点击事件。如果用封装组件的方法，在使用三方UI库的情况下，封装成本过大，并不划算。

解决方案案例

@L_777_6@

逻辑

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>
    

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

到此这篇关于Vue3实现自定义指令拦截点击事件的示例代码的文章就介绍到这了,更多相关Vue3自定义指令拦截点击事件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• Vue实现带参数的自定义指令示例
• Vue自定义指令详解
• Vue实战之掌握自定义指令
• 详解Vue自定义指令如何实现处理图片加载失败的碎图

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！