本文总结了vue3下ClickOutside的实现逻辑,从工具函数封装,到自定义指令的学习,再到源码的深入学习;虽然ClickOutside的整体逻辑并不是很复杂,但是刚开始笔者阅读源码的时候,很难理解其中的一些用法;尤其是在事件的注册,为什么不用click,而是使用mouseup/mousedown两个事件组合;经过深入的思考和对比,才
v-clickoutside的基本实现步骤 定义指令:在Vue3中,可以通过app.directive方法定义一个全局指令,或者通过组件的directives选项定义一个局部指令。 添加事件监听:在指令的mounted钩子中,为document对象添加点击事件监听器。 检查点击位置:在事件监听器中,检查点击事件的目标元素是否不在指令绑定的元素内部。如果是,则执行回调...
三、Vue2中使用v-click-outside的方法 在Vue2中使用v-click-outside,通常需要借助第三方插件或手动编写指令。虽然能够实现相应功能,但在代码编写和维护方面存在一定的不便。 四、Vue3中v-click-outside的写法 在Vue3中,v-click-outside指令已经成为了Vue.js冠方提供的一个内置指令,使用起来更加方便和简洁。 4.1...
import { on, off } from '@/utils/domUtils' const clickOutside = { mounted(el, binding) { function eventHandler(e) { // 对el和binding进行处理,判断是否触发value函数 } el.__click_outside__ = eventHandler on(document, 'click', eventHandler) }, beforeUnmount(el) { if(typeof el.__c...
方案二 使用element-plus提供的ClickOutside自定义指令 如下代码: <template> 你好啊 </template> import { ClickOutside as vC } from 'element-plus' const fn = () => { console.log('点击外部区域') } 可在node_modules文件夹中的对应的element-plus包中找到 Vue2中 方案三 使用element-ui...
vue3 自定义指令 v-click-outside exportdefaultfunctionregisterDirectives(app: App) { app.directive('click-outside', {mounted(el:any, bindings:any) { el.handler=function(e:any) {if(!el.contains(e.target)) { bindings.value(e) } }document.addEventListener('click', el.handler,true)...
$ npm install --save click-outside-vue3 $ yarn add click-outside-vue3 Use import{createApp}from"vue"importAppfrom"./App.vue"importvClickOutsidefrom"click-outside-vue3"constapp=createApp(App)app.use(vClickOutside) export default{data(){vcoConfig:{handler:this.handler,middleware:this.midd...
Vue3 自定义指令 ClickOutside 的实现深入理解如下：基础工具函数：on 和 off 函数：这两个函数用于事件绑定和解除，是处理事件的基础工具。它们提供了简洁的事件管理方式，如利用组合实现一次性事件处理等。自定义指令的生命周期：Vue 提供了多种内置指令，而自定义指令可以扩展功能以满足特定业务需求。自...
1、从elemtn-plus中导入ClickOutside指令 import { ClickOutside as vClickOutside } from 'element-plus' 2、从元素上绑定对应的指令 v-click-outside= "onClickOutside" 3、onClickOutside绑定对应的方法 vue2.0 1、导入指令 import { ClickOutside } from 'element-plus' ...
import{ createApp }from"vue"importAppfrom"./App.vue"importvClickOutsidefrom"click-outside-vue3"constapp = createApp(App) app.use(vClickOutside) exportdefault{ data () {vcoConfig: {handler:this.handler,middleware:this.middleware,events: ['dblclick','click'],// Note: The default value...