Vue3实现自定义指令拦截点击事件的示例代码
天渺工作室 人气:0案例使用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>
逻辑封装还存在优化点,后续在持续优化。
加载全部内容