# Teleport

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

示例：css 中加 `filter: saturate(200%);` 会使弹窗的定位会失效，不在屏幕的中间，而在组件的中间，可以使用 Teleport 来解决

	<template>
	<button @click="isShow = true">展示弹窗</button>
	<teleport to="body">
	<div class="my-modal" v-show="isShow">
	<h2>弹窗的标题</h2>
	<div>弹窗的内容</div>
	<button @click="isShow = false">关闭弹窗</button>
	</div>
	</teleport>
	</template>

	<script setup lang="ts" name="Modal">
	import { ref } from "vue";

	let isShow = ref(false);
	</script>
	<style scoped>
	.my-modal {
	border-radius: 10px;
	padding: 30px;
	background-color: var(--bg-color-2);
	text-align: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	}
	button {
	display: block;
	margin: 15px 0;
	}
	</style>

# Suspense

示例

	import { defineAsyncComponent, Suspense } from "vue";
	const Child = defineAsyncComponent(() => import("./Child.vue"));

	<template>
	<Suspense>
	<template v-slot:default>
	<SuspenseDemo />
	</template>
	<template v-slot:fallback> loading... </template>
	</Suspense>
	</template>

	<script setup lang="ts" name="NewComponents">
	import SuspenseDemo from "@/components/new_components/SuspenseDemo.vue";
	import { Suspense } from "vue";
	</script>

SuspenseDemo 组件

	<template>
	<div class="child">
	<h1>SuspenseDemo 用法</h1>
	<div>当前和：</div>
	<h3>短剧：</h3>
	<ul>
	<li v-for="item in data" :key="item.id"></li>
	</ul>
	</div>
	</template>

	<script setup lang="ts" name="SuspenseDemo">
	import { ref } from "vue";
	import axios from "axios";

	let sum = ref(0);
	let {
	data: { data }
	} = await axios.get("https://api.kuleu.com/api/action?text=霸总");

	console.log(data);
	</script>

示例：全局 API（写在 main.ts 文件）

	// 全局组件
	app.component("Hello", Hello);

	// 全局变量
	app.config.globalProperties.globalX = 99;
	declare module "vue" {
	interface ComponentCustomProperties {
	globalX: number;
	}
	}

	// 自定义指令
	app.directive("beauty", (element, { value }) => {
	element.innerText += value;
	element.style.color = "red";
	element.style.backgroundColor = "yellow";
	});

	// 挂载
	app.mount("#app"); // 挂载到 id 为 app 的元素上

	// 卸载
	setTimeout(() => {
	app.unmount(); // 3 秒后卸载
	}, 3000);