vue3 中的teleport属性 还有html中的弹窗
# teleport 标签 ### 可以将标签内的内容直接闪现到body中 然后就可以根据定位进行位置的调整
<template> <div class="son"> <h2>我是孙组件</h2> <button @click="isShow = true">弹出一个窗口 </button> <teleport to='body'> <div class="mask" v-if="isShow"> <div class="tanchuang"> <h1>弹窗的标题</h1> <h2>这是内容,内容</h2> <h2>这是内容(⊙o⊙)…</h2> <button @click="isShow=false">关闭弹窗</button> </div> </div> </teleport> </div> </template> <script> import {ref} from 'vue' export default { name:"Son", setup(){ let isShow = ref(false) return {isShow} } } </script> <style scroped> .mask{ position: absolute; top: 0;bottom: 0;left: 0;right: 0; background-color: rgba(0, 0, 0, 0.5); } .tanchuang{ transform:translateX(-50%) translateY(-50%); position:absolute; top: 50%; left: 50%; right: 50%; bottom: 50%; width: 1000px; height: 300px; text-align: center; background-color: salmon; } .son{ background-color: rgb(24, 189, 79); padding: 5px; } </style>