vue3.2点击页面其它地方,关闭弹窗

698 阅读1分钟

页面

<div v-show="otherColorVisible" ref="showOtherColor" class="other_color">
    <div class="color_bg">
      <div class="bg"/>
    </div>
 </div>

js

const showOtherColor = ref(null)
const otherColorVisible = ref(false)

onMounted(() => {
// 点击其他颜色以外,关闭其他颜色弹窗
    document.addEventListener("click", (e) => {
        if (showOtherColor.value) {
            let isSelf = showOtherColor.value.contains(e.target)
            if (!isSelf) {
                otherColorVisible.value = false
            }
        }
    })
})