Teleport:让部分元素脱离原来的位置，到to指定的位置去
此处指定了弹窗到body标签内
<template>
<h4>Model</h4>
<button @click="isShow = true">打开弹窗</button>
<Teleport to='body'>
<div class="tanchuang" v-show="isShow">
弹窗
<button @click="isShow = false">关闭弹窗</button>
</div>
</Teleport>
</template>
<script setup name="Model" lang="ts">
import { ref } from 'vue'
let isShow = ref(false)
</script>
<style>
.tanchuang {
padding: 20px 0;
border: 1px solid grey;
border-radius: 5px;
text-align: center;
width: 200px;
position: fixed;
left: 50%;
top: 100px;
margin-left: -100px;
}
</style>
Suspense:当child组件有异步请求，网速较慢时显示较晚，需要有一个类似加载中的展示，使用
child
<template>
<h4>Model</h4>
<div class="tanchuang">
弹窗
<button>关闭弹窗</button>
</div>
</template>
<script setup name="Model" lang="ts">
import { ref } from 'vue'
import axios from 'axios';
let {data} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
</script>
<style>
.tanchuang {
padding: 20px 0;
border: 1px solid grey;
border-radius: 5px;
text-align: center;
width: 200px;
position: fixed;
left: 50%;
top: 100px;
margin-left: -100px;
}
</style>
Parent
<template>
<div class="app">
<h3>App</h3>
<Suspense>
<template v-slot:default>
<Model/>
</template>
<template v-slot:fallback>
<h3>loading</h3>
</template>
</Suspense>
</div>
</template>
<script setup name="App" lang="ts">
import { Suspense } from 'vue';
import Model from './Model.vue'
</script>
<style>
.app {
padding: 20px 0;
border: 1px solid grey;
border-radius: 5px;
text-align: center;
background: linear-gradient(to right, skyblue, pink);
width: 400px;
height: 400px;
filter: saturate(200%);
}
</style>