Vue3.0 使用 ref 判断目标 node 区域之外的点击事件（实现下拉框、弹窗关闭功能）

有时候会遇到点击目标区域绑定事件 / 展示效果，然后点击目标区域之外的地方就关闭效果 / 触发另一事件，为了实现这样的功能，我们需要通过比对 node 节点来进行判断，在下面我会使用 Vue3.0 的 ref 属性用法与 node.contains 方法来进行案例展示。

useClickOutside.ts 核心判断文件内容如下

// 判断元素是否在 node 区域之外
import { ref, onMounted, onUnmounted, Ref } from 'vue'const useClickOutside = (elementRef: Ref<HTMLElement | null>) => {// 设置一个导出值const isClickOutside = ref(false);// 给界面绑定上事件const handler = (e: MouseEvent) => {if (elementRef.value) {// e.target 有可能是为 null 所以需要断言if (elementRef.value.contains(e.target as HTMLElement)) {// 判断目标节点是不是当前的节点isClickOutside.value = false;} else {isClickOutside.value = true}}}onMounted(() => {document.addEventListener('click', handler);});onUnmounted(() => {document.removeEventListener('click', handler);});return isClickOutside;
}export default useClickOutside;

Vue 文件内容

<template><div ref="dropdownRef"><!-- ......里面是内容...... --></div>
</template><script lang="ts">
import { defineComponent, ref, watch } from 'vue';
import useClickOutside from './useClickOutside';
export default defineComponent({setup() {// 名字要和 ref 的值一样!!!!const dropdownRef = ref<null | HTMLElement>(null);// 控制点击事件const isClickOutside = useClickOutside(dropdownRef);// 通过 watch 去监听事件的变化watch(isClickOutside, () => {if (isClickOutside.value) {// ......这里是你要操作的内容}})// 这里要导出 ref 的值，才能和界面进行关联return { dropdownRef }}
})
</script>

Vue3.0 使用 ref 判断目标 node 区域之外的点击事件（实现下拉框、弹窗关闭功能）相关推荐

vue3—elementPlus如何单独修改页面中的下拉框样式
vue3中只能去修改popper-class这个属性去修改 (自己想要的样式)重点 :样式修改不能写在scoped中,可以单独开个style popper-class="blueBack&q ...
Java17 POI5.2.0 Excel 下拉框数据校验
Java 设置Excel 下拉框.自定义数据校验一.工具类 1.ExcelUtil 2.Pom 二.生成文件 1.下拉框 2.数据校验三.Excel 命令 1.获取活动单元格:=INDIRECT( ...
Js判断下拉框是否为空值
<title>Js判断下拉框</title> <script> function ss(){ var slt=document.getElementById(&qu ...
easyui根据select下拉框内容更新表单内容_Ant Design 4.0 的一些杂事儿 - Select 篇
前几篇: Ant Design 4.0 的一些杂事儿 - Table 篇 Ant Design 4.0 的一些杂事儿 - Form 篇聊完了 Table 和 Form 两个重型组件,我们来继续聊聊看 ...
angular下拉框点击无反应_angular 实现下拉菜单的点击其他区域关闭下拉菜单功能？...
代码如图, 点击 div.selected 的时候 ul.dorpdown-list 就会显示点击 li 的时候 ul收起并且赋值给selectedVal 现在还有个需求是点击dorpDown ...
vue+iview4.0 , vue+element实现下拉框可以自定义输入内容
前言: 最近10月的时候 iview4.0 更新了,但是一直在忙也没用到,正好因为要实现一个下拉框里面我要自定义输入内容的效果,element里面是有这个效果,antd里面没有,因为本项目用的ivie ...
在 easyexcel 2.0.5 下自定义实现下拉框
在 easyexcel 2.0.5 下实现下拉框,由于easyexcel 并没有提供下拉框的api 只能自己去实现了,阿里提供一个接口WriteHandler 该接口就是用来自己自定义的功能了第一 ...
jQuery: 仿select下拉框效果，点击空白关闭弹出层，判断是否被mouseover
1. 方法一 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
基于vue3，popperjs下拉框简易实现
<template><input v-model="text" placeholder="请选择" id="trigger" ...

Vue3.0 使用 ref 判断目标 node 区域之外的点击事件（实现下拉框、弹窗关闭功能）

Vue3.0 使用 ref 判断目标 node 区域之外的点击事件（实现下拉框、弹窗关闭功能）相关推荐

最新文章

热门文章