vue3 中的teleport属性 还有html中的弹窗

# teleport 标签 ### 可以将标签内的内容直接闪现到body中 然后就可以根据定位进行位置的调整

<template>
  <div class="son">
      <h2>我是孙组件</h2>
      <button @click="isShow = true">弹出一个窗口 </button>
        <teleport to='body'>
            <div class="mask" v-if="isShow">
                <div  class="tanchuang">
                <h1>弹窗的标题</h1>
                <h2>这是内容，内容</h2>
                <h2>这是内容(⊙o⊙)…</h2>
                <button @click="isShow=false">关闭弹窗</button>
            </div>
            </div>
        </teleport>
  </div>
</template>

<script>
import {ref} from 'vue'
export default {
    name:"Son",
    setup(){
        let isShow = ref(false)
        return {isShow}
    }
}
</script>

<style scroped>
.mask{
    position: absolute;
    top: 0;bottom: 0;left: 0;right: 0;
    background-color: rgba(0, 0, 0, 0.5);
}
.tanchuang{
    transform:translateX(-50%) translateY(-50%);
    position:absolute;
    top: 50%;
    left: 50%;
    right: 50%;
    bottom: 50%;
    width: 1000px;
    height: 300px;
    text-align: center;
    background-color: salmon;
}
.son{
    background-color: rgb(24, 189, 79);
    padding: 5px;
}
</style>