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

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

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

问题

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

解决 方案 案例

逻辑

m ai n.ts

// main.ts // 举例案例 直接在初始化为全局自定义指令
import { createApp }  From  "vue";
import "./style.css";
import App f rom  "./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, p rev Vnode) {
        el.addEventListener('click', customClick(binding));
    },
    // 离开一定要销毁卸载
    un mount ed(el, binding, vnode) {
        el.removeEventListener('click', customClick);
    },
});

app.mount(" # app");

页面中的使用

<template>
<!--函数不带括号-->
<button v-custom="onClick"> test 按钮</button>
<el-button ty PE =" Primary " v-custom="onClick test1 "> PR imary</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自定义指令如何实现处理图片加载失败的碎图

总结

以上是 为你收集整理的 Vue3实现自定义指令拦截点击事件的示例代码 全部内容，希望文章能够帮你解决 Vue3实现自定义指令拦截点击事件的示例代码 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Vue3实现自定义指令拦截点击事件的示例代码的详细内容...