Vue3 Teleport <Teleport to='位置'>

Teleport是一种能够将组件html结构移动到指定位置的技术

<template>
  <div>
    <button @click="isShow = true">弹窗</button>

    <Teleport v-if="isShow" to="body">
        <div  class="dialog">
            <h3>我是弹窗</h3>
            <h3>......</h3>
            <h3>......</h3>
            <button @click="isShow = false">关闭</button>
        </div>
    </Teleport>

  </div>
</template>

<script>
import { ref } from 'vue';

    export default {
        name:'DialogData',
        setup(){
            let isShow = ref(false)

            return{isShow}
        }
        
    }
</script>

<style>
    .dialog{
        background-color: brown;
        width: 500px;
        height: 500px;
    }

</style>