我们在做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也可以使用