vue点击空白区域让窗口关闭

老问题了，自己实现一个，要求有两个：

1.点击窗口其他地方实现页面关闭

2.窗口互斥，一个窗口打开，另一个应该关闭

3.附加要求，其他功能不能被耽误被影响

上html代码

<template>
    <h1>该页面用来测试点击空白关闭窗口</h1>
    <div> <button @click.stop="boxswitch('flag1')">点击激活窗口1</button>
        <div class="box" v-show="flag.flag1" @click.stop>
            <div>窗口一</div>
        </div>
    </div>
    <div> <button @click.stop="boxswitch('flag2')">点击激活窗口2</button>
        <div class="box" v-show="flag.flag2" @click.stop>
            <div>窗口二</div>
        </div>
    </div>
    <el-button :plain="true" @click="open">Show message</el-button>

</template>

两个窗口，加上一个el-plus的对话框，测试要求三，估计懂的同学看到.stop修饰符就知道写法了

上ts，具体注释写在里面了，难点在于一个状态联调

<script lang="ts" setup>
import { ElMessage } from 'element-plus'
import { onMounted, reactive } from "vue"

type FlagType = {
    [key: string]: boolean
}
// 创建一个flag对象，所有关于盒子开关的flag值全部放在里面
let flag = reactive<FlagType>({ flag1: false, flag2: false })
// 一个box全部关闭的方程，该方程会在添加在document的点击时间上，点击页面的任何一点，所有的盒子都会关闭
// 我给了一个可选参数，用来跳过某个flag的某个key，使得这个盒子的状态不变
let boxClose = (key?: string) => {
    for (let k in flag) {
        if (k == key) continue
        flag[k] = false
    }
}
const open = () => {
    ElMessage('this is a message.')
}
//添加了一个参数key让某个盒子打开，同时利用这个参数能够不用写那么多的打开关闭方程
let boxswitch = (key: string) => {
    // 假设A打开（true）又按动btn按钮想让A关闭（false）
    // 假设boxClose没有参数，所有的flag变成false，然后flag[key] = !flag[key]，也就是现在对应key的box现在还是true状态
    // 所以要设置参数key，在boxClose阶段跳过，然后flag[key] = !flag[key]，此时对应key的flag就是false
    boxClose(key)
    flag[key] = !flag[key]
}
onMounted(() => {
    // 点击document，所有的盒子都会关闭，但是因为我们的button和所要打开的box都加上了@click.stop,使得事件不会向上冒泡，不会触发
    document.addEventListener("click", () => {
        boxClose()
    })
})
</script>

上style，这个就没什么看头了，简单样式

<style lang="scss" scoped>
.box {
    margin: 0 auto;
    height: 40vh;
    width: 40vw;
    border: 1px solid black;
}
</style>

还是觉得自己语言表达的能力欠缺，同时发现以前学过的东西无论多么细小都用得上。不会做gif图，自己测试过，应该好使。