传送门teleport可以将元素放置于所写位置的其他位置
使用：在标签中使用 to属性- - - to=“标签名/.类名/#id名”
eg:
<!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>传送门</title>
<style>
.area {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 200px;
background-color:palevioletred;
}
.mask {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: black;
opacity: 0.5;
color: white;
}
</style>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
msg: '你好波吉，我是卡克',
show: false
}
},
methods: {
handleClick() {
this.show = !this.show
}
},
template: `
<div class="area">
<button @click="handleClick">显示遮罩层</button>
<teleport to="body">
<div v-if="show" class="mask">{{ msg }}</div>
</teleport>
</div>
`
})
const vm = app.mount('#root')
</script>
</html>
页面效果：
