本文总结了vue3下ClickOutside的实现逻辑,从工具函数封装,到自定义指令的学习,再到源码的深入学习;虽然ClickOutside的整体逻辑并不是很复杂,但是刚开始笔者阅读源码的时候,很难理解其中的一些用法;尤其是在事件的注册,为什么不用click,而是使用mouseup/mousedown两个事件组合;经过深入的思考和对比,才慢慢理解作者的用意。
方案一 使用vueuse提供的onClickOutside函数 如下代码: <template>你好啊</template>import{onClickOutside}from'@vueuse/core'import{ref}from"vue";consttarget=ref(null)onClickOutside(target,(event)=>{console.log('点击外部区域',event)}) 官方文档地址: https://vueuse.org/core/onClickOutside/v...
Vue3中 方案一 使用vueuse提供的onClickOutside函数 如下代码: <template> 你好啊 </template> import { onClickOutside } from '@vueuse/core' import { ref } from "vue"; const target = ref(null) onClickOutside(target, (event) => { console.log('点击外部区域', event) }) 官方文档...
在Vue 3 中实现点击外部区域(clickoutside)的功能,可以通过多种方式来完成。以下是几种常见的实现方法: 方法一:使用 vueuse 提供的 onClickOutside 函数 vueuse 是一个基于 Vue 3 的组合式 API 工具库,它提供了很多实用的函数,包括 onClickOutside。 vue <template> <div> <button ref...
本文应该是全网最深入的对自定义指令ClickOutside的解读,文章内容较长,觉得有所收获的记得点赞关注收藏,一键三连。 工具函数 首先是on和off函数,在naive-ui-admin中用来给函数注册绑定和解除绑定事件 export function on( element: Element | HTMLElement | Document | Window, event: string, handler: EventListene...
vue3 自定义指令 v-click-outside export default function registerDirectives(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....
Vue3 自定义指令 ClickOutside 的实现深入理解如下：基础工具函数：on 和 off 函数：这两个函数用于事件绑定和解除，是处理事件的基础工具。它们提供了简洁的事件管理方式，如利用组合实现一次性事件处理等。自定义指令的生命周期：Vue 提供了多种内置指令，而自定义指令可以扩展功能以满足特定业务需求。自...
三、Vue2中使用v-click-outside的方法 在Vue2中使用v-click-outside,通常需要借助第三方插件或手动编写指令。虽然能够实现相应功能,但在代码编写和维护方面存在一定的不便。 四、Vue3中v-click-outside的写法 在Vue3中,v-click-outside指令已经成为了Vue.js冠方提供的一个内置指令,使用起来更加方便和简洁。 4.1...
$ yarn add click-outside-vue3 Use 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',...
ClickOutside指令可以用于检测用户是否点击了组件外部的区域。这在一些情况下非常有用,例如当我们希望在点击组件外部时关闭弹出窗口或下拉菜单。 在Vue2中,我们通常需要手动编写一个指令来实现这样的功能。但在Vue3的Script Setup中,我们可以直接使用现成的ClickOutside指令,而不需要额外的代码。 首先,我们需要在组件的...