Teleport 是什么
Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。

如果我们嵌套在 Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。
使用Teleport 就可以方便的解决组件间 css 层级问题
————————————————
版权声明：本文为CSDN博主「前端打工人」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_43953518/article/details/109640198

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>    <script src="https://unpkg.com/vue@next"></script>
    <style>
        .area{
            position: absolute;
            left: 50%;
            top: 10%;
            transform: translateX(-50%,-50%);
            width: 200px;
            height: 400px;
            background-color: aquamarine;
        }
        .mask{
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            background-color: #adadad;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script>
        const root = Vue.createApp({
            data(){
                return{
                    data:10,
                    show:false
                }
            },
            methods:{
                btnClick(){
                    console.log('12')
                    this.show = true
                }
            },
            template:`
                <div class='area'>
                    <button @click='btnClick'> 按钮 </button>
                    <teleport to='body'>
                        <div class='mask' v-show='show'></div>
                    </teleport>
                </div>
            `

        })

        root.mount('#app')
    </script>
</body>
</html>
View Code