vue3-组合式api-teleport
teleport是一个内置组件，它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去，最常见的例子就是模态框。
<template>
<div>
<!-- 弹窗 -->
<myModal></myModal>
</div>
</template>
<script>
import myModal from "./myModal.vue";
export default {
components: {
myModal,
},
setup() {
return {};
},
};
</script>
myModal组件
<template>
<div>
<button @click="modalOpen = true">弹出一个模态窗口</button>
<!-- Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下渲染了 HTML，而不必求助于全局状态,
to="body" 挂载到body标签下-->
<teleport to="body">
<div v-if="modalOpen" class="modal">
<h3>这是一个弹窗，我的父元素是body</h3>
<button @click="modalOpen = false">关闭</button>
</div>
</teleport>
</div>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const modalOpen = ref(false);
return {
modalOpen,
};
},
};
</script>
<style scoped>
.modal {
position: fixed;
top: 20%;
left: 20%;
height: 200px;
width: 400px;
background-color: pink;
}
</style>
运行项目界面效果如下
点击弹出一个模态窗口按钮，弹窗会显示
出 处：https://www.cnblogs.com/xiao-wo-niu/
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。
