脚本宝典收集整理的这篇文章主要介绍了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>
逻辑封装还存在优化点,后续在持续优化。
到此这篇关于Vue3实现自定义指令拦截点击事件的示例代码的文章就介绍到这了,更多相关Vue3自定义指令拦截点击事件内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的Vue3实现自定义指令拦截点击事件的示例代码全部内容，希望文章能够帮你解决Vue3实现自定义指令拦截点击事件的示例代码所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。