vue3快速入门-Teleport

最新推荐文章于 2024-06-05 20:13:58 发布

leveretz

最新推荐文章于 2024-06-05 20:13:58 发布

阅读量168

点赞数

分类专栏：前端开发文章标签：前端 javascript vue.js

原文链接：https://blog.csdn.net/qq_48960335/article/details/125335217

版权

前端开发专栏收录该内容

30 篇文章 2 订阅

订阅专栏

"Vue3 的 Teleport 组件提供了一种将内容渲染到 Vue 应用外部的 DOM 节点上的方法，以解决组件嵌套导致的定位、z-index 和样式冲突。通过指定 `to` 属性，例如 `to="body"`，可以将模态框等元素挂载到 body 上，避免了复杂的 CSS 层级调整。博客展示了如何在父组件和子组件中使用 Teleport 实现一个弹框模态，并通过实例解释了其工作原理。"

摘要由CSDN通过智能技术生成

原文：vue3快速入门-Teleport(瞬移组件)_温情key的博客-CSDN博客_vue中teleport

Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。

如果我们嵌套在 Vue app 内的某个组件内部，那么处理嵌套组件的定位、z-index 和样式就会变得很困难。
使用 Teleport 就可以方便的解决组件间 css 层级问题

我们将模态内容包装在 teleport 组件中，还需要指定一个 to 属性，为该属性分配一个查询选择器，以标识目标元素。

父组件
<template>
<div id="d1">
<h3>第一个div</h3>
</div>
<div id="d2">
<h3>第二个div</h3>
</div>
<ModalButton></ModalButton>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import ModalButton from "../components/ModalButton.vue";

export default defineComponent({
components: {
ModalButton,
},
setup() {
return {};
},
});
</script>

子组件-teleport
<template>
<div>
<button @click="modalOpen = true">弹出一个模态框</button>

<teleport to="body">
<div v-if="modalOpen" class="modal">
<div>
这是一个弹框，挂载在 body 元素上。
<button @click="modalOpen = false">关闭</button>
</div>
</div>
</teleport>

</div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
setup() {
const modalOpen = ref(false);

return { modalOpen };
},
});
</script>

<style scoped>
.modal {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.modal div {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
background-color: white;
width: 350px;
height: 300px;
padding: 5px;
}
</style>

to属性为body