vue3中的teleport（瞬移）组件

Posted 2022-02-05 web半晨

目录

• 1、描述
• 2、示例
• • 2.1、父组件
  • • 2.1.1、html部分
    • 2.1.2、typescript部分
  • 2.2、子组件
  • • 2.2.1、html部分
    • 2.2.2、typescript部分
    • 2.2.3、css部分

---

1、描述

teleport组件提供了一种干净的方法，让组件的html在父组件界面外的特定标签（很可能是body）下插入显示。说白了就是在这个组件里的元素不会嵌套在id = 'app的容器里显示，而是挂载在body标签上。

---

2、示例

2.1、父组件

2.1.1、html部分

<template>
	<h2>App</h2>
	<modal-button></modal-button>
</template>

---

2.1.2、typescript部分

import ModalButton from './ModalButton.vue'

export default 
	components: 
		ModalButton
	
	setup() 
		return 
	,

---

2.2、子组件

2.2.1、html部分

<template>
	<button @click="modalOpen = true">
		Open full screen modal! (With teleport!)
	</button>

	<teleport to="body">
		<div v-if="modalOpen" class="modal">
			<div>
				<button @click="modalOpen = false">Close</button>
			</div>
		</div>
	</teleport>
</template>

---

2.2.2、typescript部分

import  ref  from 'vue'
export default 
	name: 'modal-button',
	setup () 
		const modalOpen = ref(false)
		return 
			modalOpen
		
	

---

2.2.3、css部分

.modal 
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background-color: rgba(0,0,0,.5);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;


.modal div 
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background-color: white;
	width: 300px;
	height: 300px;
	padding: 5px;