如何在兩個 dom 元素上使用 onClickOutside (vueuse)？

Question

onClickOutside package 中的vueuse function 可用於在ref外部發生點擊事件時觸發：

const imageRef = ref(null)

onClickOutside(imageRef, (event) => {
    state.active = false
})

dom元素：

<img ... ref="imageRef"/>

但是有沒有辦法在兩個 dom 元素上使用它？ 我想要的是在用戶單擊兩個元素之外時觸發 function。 我嘗試在兩個 dom 元素上添加相同的ref ，但 ref 只是被第二個元素覆蓋。 所述 dom 元素不會在v-for循環中呈現。

Answer 1

如果你仍然想通過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>