監(jiān)聽除某元素之外點(diǎn)擊事件

需求：有時候如果我們需要監(jiān)聽某個元素職位的點(diǎn)擊事件，例如input框獲取焦點(diǎn)軟盤彈起，托起 position: absolute; bottom: 0;在底部的dmoe元素，現(xiàn)在我點(diǎn)擊軟盤彈起狀態(tài)的情況點(diǎn)擊該dmoe時軟盤不會失去焦點(diǎn)！

npm:

npm?i?@vueuse/core

From v6.0, VueUse requires vue >= v3.2 or @vue/composition-api >= v1.1

CDN:

<script src="https://unpkg.com/@vueuse/shared">script><script?src="https://unpkg.com/@vueuse/core">script>

import?{?onClickOutside?}?from?'@vueuse/core'

把target加載外層容器上:

class="content"?ref="target">

setup() {  // 鼠標(biāo)在目標(biāo)之外點(diǎn)擊，就會執(zhí)行回調(diào)  onClickOutside(監(jiān)聽的目標(biāo), (e) => {    // 鼠標(biāo)在目標(biāo)之外點(diǎn)擊，要做什么？  })}

setup () {    // ...    // 點(diǎn)擊其他位置隱藏    const target = ref(null)    onClickOutside(target, () => {      closeDialog()    })    return { visible, toggleDialog, target }??}