本文总结了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...
在Vue 3中,自定义一个clickoutside指令可以帮助你在点击元素外部时触发某些操作,比如关闭下拉菜单或模态框。下面是一个详细的步骤和代码示例来实现这个自定义指令。 步骤一:创建自定义指令 首先,你需要创建一个自定义指令。你可以在Vue项目的src/directives目录下创建一个新的文件,比如clickOutside.js。 javascript im...
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...
$ 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...
$ 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',...
三、Vue2中使用v-click-outside的方法 在Vue2中使用v-click-outside,通常需要借助第三方插件或手动编写指令。虽然能够实现相应功能,但在代码编写和维护方面存在一定的不便。 四、Vue3中v-click-outside的写法 在Vue3中,v-click-outside指令已经成为了Vue.js冠方提供的一个内置指令,使用起来更加方便和简洁。 4.1...
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)...
ClickOutside指令可以用于检测用户是否点击了组件外部的区域。这在一些情况下非常有用,例如当我们希望在点击组件外部时关闭弹出窗口或下拉菜单。 在Vue2中,我们通常需要手动编写一个指令来实现这样的功能。但在Vue3的Script Setup中,我们可以直接使用现成的ClickOutside指令,而不需要额外的代码。 首先,我们需要在组件的...
Vue3 自定义指令 ClickOutside 的实现深入理解如下：基础工具函数：on 和 off 函数：这两个函数用于事件绑定和解除，是处理事件的基础工具。它们提供了简洁的事件管理方式，如利用组合实现一次性事件处理等。自定义指令的生命周期：Vue 提供了多种内置指令，而自定义指令可以扩展功能以满足特定业务需求。自...