vue3实现点击空白区域隐藏div

<template>
     <!-- 主界面容器，按钮点击显示组件，引入组件 -->
    <el-button type="primary" @click="showBox">点击显示box</el-button>
    <div style="width: 100%;height: 100%; background-color: aquamarine;">
        <NewModel></NewModel>
    </div>
</template>
<script setup lang="ts">
import NewModel from '@/components/NewModel.vue'    //引入组件
import { useUsersStore } from '@/store/index'
const store = useUsersStore()
 
 
const showBox = (e: any) => {
    store.changeState(true)
    e.stopPropagation() //阻止事件冒泡，必须要*,很重要
}
</script>
<style></style>

<template>
    <!-- 子组件容器 -->
    <div ref="codeDom" style="width: 300px; height: 300px; background-color: antiquewhite;" v-if="store.isHide"></div>
</template>
 
<script lang='ts' setup>
import { watch, ref, onUnmounted } from 'vue'
import { useUsersStore } from '@/store/index'   //引入store
import { storeToRefs } from 'pinia';            //pinia结构化
const store = useUsersStore()
const codeDom = ref()
const { isHide } = storeToRefs(store)
 
//监听点击事件，改变组件的显隐状态
const closeSelect = () => {
    document.addEventListener('click', (e) => {
        if (codeDom.value && !codeDom.value.contains(e.target)) {
            store.changeState(false)
        }
    })
}
 
//监听store状态的改变，若状态为true时，运行closeSelect
watch(isHide, (val) => {
    if (val) {
        closeSelect()
    }
})
 
onUnmounted(() => {
    document.removeEventListener('click', closeSelect)
})
 
</script>
<style lang='scss' scoped></style>

import { defineStore } from 'pinia'
 
export const useUsersStore = defineStore('users', {
    state: () => {
        return {
            isHide: false,
        };
    },
    actions: {
        changeState(val) {
            this.isHide = val
        },
    },
    getters: {},
})