import{on,off}from'@/utils/domUtils'constclickOutside={mounted(el,binding){functioneventHandler(e){// 对el和binding进行处理,判断是否触发value函数}el.__click_outside__=eventHandleron(document,'click',eventHandler)},beforeUnmount(el){if(typeofel.__click_outside__==='function'){off(document...
方案一 使用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...
官方文档地址:https://vueuse.org/core/onClickOutside/ 方案二 使用element-plus提供的ClickOutside自定义指令 如下代码:<template> 你好啊 </template> import { ClickOutside as vC } from 'element-plus' const fn = () => { console.log('点击外部区域') } 可在node_modules文件夹中的对应的...
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' ...
@click="onClickOutside" > <el-icon><ArrowDownBold /></el-icon> <el-popover ref="popoverRef" trigger="hover" virtual-triggering :virtual-ref="buttonRef" > 刷新 关闭其他 关闭左侧 关闭
利用vueuse/core里的onClickOutside,判断点击是否是外部组件,来帮助我们关闭弹层。 终端中执行yarn add @vueuse/core@5.3.0,这里安装指定版本,各位按需选择。 二.代码实现 1.封装 将其封装为局部组件,文件放在src/libs目录下,新建city.vue组件。 代码如下(示例): ...
const onClickOutside = () => { active.value = false }, },2. VueUse 插件地址:https://vueuse.org/ VueUse 提供了 200+ 个基本实用程序函数的集合,用于与浏览器、状态、网络、动画、时间等各种 API 进行交互,这些函数可以轻松导入并在 Vue.js 组件中使用。因此,无需编写太多代码就可以添加访问本...
import { onClickOutside } from '@vueuse/core' import type { RenderableComponent } from '../types' import type { OnClickOutsideOptions } from '.' export interface OnClickOutsideProps extends RenderableComponent { options?: OnClickOutsideOptions ...
<template><el-icon><ArrowDownBold/></el-icon><el-popoverref="popoverRef"trigger="hover"virtual-triggering:virtual-ref="buttonRef">刷新关闭其他关闭左侧关闭右侧</el-popover></template>