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{<