如何在两个dom元素上使用onClickOutside (vueuse)？
如何在两个dom元素上使用onClickOutside (vueuse)？
提问于 2022-11-18 16:28:59
当单击事件发生在onClickOutside包之外时，可以使用vueuse包中的ref函数触发
const imageRef = ref(null)
onClickOutside(imageRef, (event) => {
state.active = false
})dom元素：
<img ... ref="imageRef"/>但是有什么方法可以在两个dom元素上使用它吗？我想要的是，当用户单击两个元素的外部时，触发函数。我尝试在两个dom元素上添加相同的ref，但是ref只是被第二个元素覆盖。所述多姆元素是，而不是在v-for循环中呈现的。
回答 1
Stack Overflow用户
发布于 2022-11-18 16:57:09
如果您仍然想通过vueuse来处理这个问题，那么有一个选项：ignore
<template>
<img ... ref="imageRef"/>
<p ... ref="pRef"/>
</template>
<script setup>
import { ref } from 'vue';
import { onClickOutside } from '@vueuse/core'
const imageRef = ref(null), pRef = ref(null), state = ref({active: false});
const doSomething = () => {state.value.active = true};
onClickOutside(imageRef, doSomething, {ignore: [pRef]});
onClickOutside(pRef, doSomething, {ignore: [imageRef]});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74492663
复制相关文章
相似问题
腾讯云开发者
