我们在做vue2项目的时候，往往弹窗设置都挺负责的需要各种z-indx，而vue3推荐的做法是使用Teleport
<!-- index.html--> <body> <div id="app"></div> <div id="teleport-target"></div> <script type="module" src="/src/main.ts"></script> </body>
在组件内
<template>
<p>我是设置页面a</p>
<button @click="showToast" class="btn">打开 toast</button>
<!-- to 属性就是目标位置 -->
<teleport to="#teleport-target">
<div v-if="visible" class="toast-wrap">
<div class="toast-msg">我是一个 Toast 文案</div>
</div>
</teleport>
</template>
<script setup lang="ts">
import { getCurrentInstance, inject, watch, ref } from 'vue'; // 子组件
const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties // 获取全局对象\
const name = inject('name')
watch(name, (newValue, oldValue) => {
console.log(name.value)
})
// toast 的封装
const visible = ref(false);
let timer;
const showToast = () => {
visible.value = true;
// clearTimeout(timer);
// timer = setTimeout(() => {
// visible.value = false;
// }, 2000);
}
</script>
<style>
</style>
然后引入这个组件，设置一下样式就好了，父组件传递的props也可以使用