VueUse OnClickOutside 忽略选项不起作用

Question

我正在使用来自

OnClickOutside

的

VueUse

，vue代码是：

<template>
  <button class="button" id="button1" ref="tempRef">AAA</button>
  <OnClickOutside id="clickOutside" :options="{ ignore: [tempRef] }" @trigger="console.log(tempRef)">
    <button class="button" id="button2">BBB</button>
  </OnClickOutside>
</template>

<script setup>
import { OnClickOutside } from '@vueuse/components'
import { ref } from 'vue'

const tempRef = ref()
</script>

所以，我的期望是，当我单击

button1

时，

OnClickOutside

不会被触发，因为

tempRef

位于忽略内部。 但是，事实证明，当我单击

tempRef

时，控制台仍然输出

button1

。我尝试过一些调整，但没有任何效果。 我是否误解了如何在

OnClickOutside

中使用忽略？如何解决这个问题？谢谢你的帮助

这里是方便访问的文档：https://vueuse.org/core/onClickOutside/

Answer 1

在模板中使用时，引用会自动展开，因此不是向忽略选项提供

ref

对象，而是向其提供内部非引用值。如果您提供在

<script>

代码中创建的选项对象，它应该可以工作：

<template>
  <button id="button1" ref="tempRef" class="button">AAA</button>
  <OnClickOutside
    id="clickOutside"
    :options="options"
    @trigger="console.log(tempRef)"
  >
    <button id="button2" class="button">BBB</button>
  </OnClickOutside>
</template>

<script setup>
import { OnClickOutside } from '@vueuse/components'
import { ref } from 'vue'

const tempRef = ref()

const options = { ignore: [tempRef] }
</script>

忽略选项也可以被赋予一个选择器字符串，因此如果您想要仅模板解决方案，您可以使用它作为替代方案：

<OnClickOutside
  id="clickOutside"
  :options="{ ignore: ['#button1'] }"
  @trigger="console.log(tempRef)"
>