目錄
- teleport傳送門
-
- 例： 蒙層特效
- 目标效果
- 代碼示範
- 頁面效果
- 未使用teleport存在的問題
- 使用teleport實作目标效果
- 完整代碼
- 總結
teleport傳送門
Teleport 是一種能夠移動 DOM到Vue根節點之外的技術。
例： 蒙層特效
目标效果
點選按鈕這個頁面顯示一個滿屏的半透明的黑色蒙層，再次點選隐藏蒙層。
代碼示範
首先建立DOM結構：
<div class="area">
<button @click="handleClick">按鈕</button>
<div class="mask" v-show="show" @click="handleClick"></div>
</div>
然後綁定樣式：
/* 父容器樣式 */
.area{
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 150px;
transform: translate(-50%, -50%);
background-color: #ccc;
}
/* 蒙層樣式 */
.mask{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #000;
opacity: 0.5;
}
最後寫上綁定的方法和資料：
data(){
return{
show: false
}
},
methods:{
handleClick(){
this.show = !this.show;
}
},
頁面效果
點選按鈕，觸發點選事件後頁面效果。
未使用teleport存在的問題
在未使用teleport标簽情況下、蒙層div受父容器影響。蒙層鋪滿父容器，但并未鋪滿整個螢幕。
使用teleport實作目标效果
使用teleport标簽、将蒙層div傳送到body節點下，實作目标效果。
<div class="area">
<button @click="handleClick">按鈕</button>
<teleport to="body">
<div class="mask" v-show="show" @click="handleClick"></div>
</teleport>
</div>
頁面結構：
頁面效果：
完整代碼
<!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>Vue3 -- teleport傳送門</title>
<!-- 使用CDN引入Vue -->
<script src="https://unpkg.com/[email protected]"></script>
<style>
.area{
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 150px;
transform: translate(-50%, -50%);
background-color: #ccc;
}
.mask{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #000;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data(){
return{
show: false
}
},
methods:{
handleClick(){
this.show = !this.show;
}
},
template:`
<div class="area">
<button @click="handleClick">按鈕</button>
<teleport to="body">
<div class="mask" v-show="show" @click="handleClick"></div>
</teleport>
</div>
`
});
const vm = app.mount('#root');
</script>
</body>
</html>
總結
使用Teleport能夠移動DOM，避免其受父容器的影響
結語
本小節到此結束，謝謝大家的觀看！
如有問題歡迎各位指正