web0331/11.vue3/vue-project3/src/Teleport/demo.vue

<template>
  <Teleport to="body">
    <div class="demo">
    <h1>demo</h1>
    <button @click="isShow = true">开启弹框</button>
    <button @click="isShow = false">关闭弹框</button>
    <div class="dialog" v-if="isShow"></div>
  </div>
  </Teleport>
</template>

<script lang="ts" setup>
import {ref,reactive} from "vue" 
let isShow = ref(false)
</script>

<style  scoped>
.demo {
  width: 400px;
  height: 400px;
  background: skyblue;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -200px;
}
.dialog{
  width: 100px;
  height: 100px;
  background: #00f;
}
</style>