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%);
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>