在Vue 3 中实现点击外部区域(clickoutside)的功能,可以通过多种方式来完成。以下是几种常见的实现方法: 方法一:使用 vueuse 提供的 onClickOutside 函数 vueuse 是一个基于 Vue 3 的组合式 API 工具库,它提供了很多实用的函数,包括 onClickOutside。 vue <template> <div> <button ref...
本文总结了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...
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...
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' ...
VUE - vue3 自定义指令 consthideDiv = () => visCardRef.value =false; //自定义指令constvClickOutside ={ beforeMount(el: any, binding: any) { debugger; let clickOutsideEvent= (event: any) =>{ debugger;//点击外部时触发if(!(el ===event.target ...
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项目中,首先需要安装v-click-outside插件。可以通过npm或yarn来进行安装,具体命令如下: ```bash npm install vueuse/core ``` 或 ```bash yarn add vueuse/core ``` 4.2 在组件中使用v-click-outside指令 安装完成后,在Vue3组件中即可直接使用v-click-outside指令。示例代码如下: ```html <templa...
$ 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',...