Teleport/index.vue代码
<template> <div class="dialog"> <header class="header"> <div>我是弹框</div> <el-icon><CloseBold /></el-icon> </header> <main class="main">我是内容</main> <footer class="footer"> <el-button size="small">取消</el-button> <el-button size="small" type="primary">确定</el-button> </footer> </div> </template> <script setup lang="ts"></script> <style lang="less" scoped> .dialog { width: 400px; height: 400px; background: #ccc; display: flex; flex-direction: column; position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -200px; .header { display: flex; color: #000; border-bottom: 1px solid #636466; padding: 10px; justify-content: space-between; } .main { flex: 1; color: #000; padding: 10px; } .footer { border-top: 1px solid #000; padding: 10px; display: flex; justify-content: flex-end; } } </style>
父级:
<template> <div class="parent"> <h1>我是父级</h1> <Teleport to="body"> <A></A> </Teleport> </div> </template> <script setup lang="ts"> import A from './components/Teleport/index.vue' </script> <style lang="less" scoped> .parent { background: yellow; height: 50vh; position: relative; } </style>