vue3中Teleport——传送门

什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

如何想找弹框传入到最顶层，将移动位置写成body即可，然后相对于body进行定位：

<teleport to="移动位置">
	<div v-if="isShow" class="mask">
		<div class="dialog">
			<h3>我是一个弹窗</h3>
			<button @click="isShow = false">关闭弹窗</button>
		</div>
	</div>
</teleport>


<style>
	.mask{
    
    
		position: absolute;
		top: 0;bottom: 0;left: 0;right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.dialog{
    
    
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		width: 300px;
		height: 300px;
		background-color: green;
	}
</style>

简易版的弹框如图所示：