方案一:采用VueUse标准化方案 实施步骤: 在项目根目录执行依赖安装: pnpm add @vueuse/core 重构组件逻辑: import{ onClickOutside }from'@vueuse/core'constdropdownRef = ref<HTMLElement|null>(null);onClickOutside(dropdownRef,() =>{closeDrop
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...
方案一 使用vueuse提供的onClickOutside函数 如下代码: <template> 你好啊 </template> import { onClickOutside } from '@vueuse/core' import { ref } from "vue"; const target = ref(null) onClickOutside(target, (event) => { console.log('点击外部区域', event) }) 官方文档地址: htt...
在Vue2中使用v-click-outside,通常需要借助第三方插件或手动编写指令。虽然能够实现相应功能,但在代码编写和维护方面存在一定的不便。 四、Vue3中v-click-outside的写法 在Vue3中,v-click-outside指令已经成为了Vue.js冠方提供的一个内置指令,使用起来更加方便和简洁。 4.1 安装v-click-outside插件 在Vue3项目...
directives: {Clickoutside}, 模板中正式使用 2.2实现介绍 简要说明下原理,首先vue自定义指令本身(不了解可以点击链接查看官网介绍)。主要就是利用vue指令的功能,获取所绑定元素的dom对象dom_A以及传递过来的回调方法fun_A,然后监听浏览器的mousedown和mouseup事件(mousedown作为辅助信息,真正触发传递的回调方法的是mous...
在Vue 3中,自定义一个clickoutside指令可以帮助你在点击元素外部时触发某些操作,比如关闭下拉菜单或模态框。下面是一个详细的步骤和代码示例来实现这个自定义指令。 步骤一:创建自定义指令 首先,你需要创建一个自定义指令。你可以在Vue项目的src/directives目录下创建一个新的文件,比如clickOutside.js。 javascript im...
$ npm install vue-click-outside Example <template> 面板 </template> export default { data() { return { isShow: false }; }, methods: { show() { this.isShow = true; }, hide() { this.isShow = false; }, }, }; Readme Keywords vue click outsidePackage Sidebar Install npm...
import ClickOutside from 'vue-click-outside' export default { data () { return { opened: false } }, methods: { toggle () { this.opened = true }, hide () { this.opened = false } }, mounted () { // prevent click outside event with popupItem. ...
<template>TogglePopup item</template>importClickOutsidefrom'vue-click-outside'exportdefault{ data () {return{opened:false} },methods: { toggle () {this.opened =true}, hide () {this.opened =false} }, mounted () {// prevent click out...
在modal中使用onClickOutside时会有个缺陷,当modal中按住鼠标左键然后鼠标移出modal区域再松开鼠标左键,这时不会触发modal的单击事件,因为要在同一个元素上的mousedown及mouseup相继触发后才会执行click事件,但是会触发window上的click事件,因为modal元素是在window内的,鼠标左键按下时mousedown事件冒泡到window上,鼠标松开...