14-Teleport
<template>
<div class="parent">
<h1>我是父级</h1>
<!-- disable设置为true则不传送 disable为true则传送 class .bottom #bottom 或者标签元素 -->
<Teleport to=".bottom" :disabled="false">
<A></A>
</Teleport>
</div>
<div class="bottom"></div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import A from './Card/A.vue'
</script>
<style lang="less" scoped>
* {
padding: 0;
margin: 0;
}
.parent {
background: yellow;
height: 50vh;
position: relative;
}
.bottom {
background: rebeccapurple;
height: 50vh;
position: relative;
}
</style>
<template>
<div class="dialog">
<header class="header">
<div>我是弹框</div>
<el-icon>
<CloseBold></CloseBold>
</el-icon>
</header>
<div class="main">
我是内容xasdasda
</div>
<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: #141414;
display: flex;
flex-direction: column;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -200px;
.header {
display: flex;
color: #cfd3dc;
border-bottom: 1px solid #636466;
padding: 10px;
justify-content: space-between;
}
.main {
flex: 1;
color: #cfd3dc;
padding: 10px;
}
}
</style>