一、Teleport
1、Teleport的功能
Teleport 是一个内置的组件,它允许你将某个组件或元素的渲染位置“传送”到 DOM 中的其他位置,而不是跟随其父组件的层级进行渲染。
通常情况下,Vue 组件的 DOM 节点会按照其父组件的结构被插入到 DOM 树中。然而,有时我们希望某些元素(比如模态框、通知、悬浮菜单等)出现在页面的不同位置,而不受其父组件的限制。Teleport 就是为了解决这个问题而引入的。传递过去的html代码是独立的,不能插入的原代码中。
2、典型的使用场景
- 模态框(Modal): 模态框通常需要在页面的根节点上进行渲染,以避免被其他 CSS 样式或布局限制。
- 通知(Notification): 通知一般出现在页面的顶部或角落,不应受到其父组件位置的限制。
- 浮动元素(Dropdown/Menu): 这些元素可能需要在视觉上脱离它们的父组件,避免因 overflow 等样式被剪裁。
3、参数介绍
Teleport 的参数
to: 接受一个 CSS 选择器或 DOM 元素,指定要传送到的目标位置。例如:
to="body":将内容传送到 <body>。
to="#app":将内容传送到带有 id="app" 的元素中。
disabled: 如果设为 true,则 Teleport 组件会取消传送,内容会在原地渲染。
<teleport to="" :disabled="true">
代码或者是组件
</teleport>
4、实例:
<template>
<div>
<button @click="showModal = true">Open Modal</button>
<!-- 使用 Teleport 将模态框传送到 body 标签内, 可以to 到id,class,元素选择器等等 -->
<teleport to="body">
<!--内部也可以是个组件-->
<div v-if="showModal" class="modal">
<p>This is a modal!</p>
<button @click="showModal = false">Close</button>
</div>
</teleport>
</div>
</template>
<script setup lang="ts">
import {
ref} from 'vue'
const showModal = ref(false)
</script>
<style lang="scss" scoped>
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » Vue学习记录之十 之 Teleport传送组件/keep-alive缓存组件/transition动画组件
发表评论 取消回复