Vue学习记录之十之 Teleport传送组件/keep-alive缓存组件/transition动画组件

LvManBa

于 2024-10-09 21:35:42 发布

阅读量602

点赞数 12

文章标签： vue.js 学习缓存

本文链接：https://blog.csdn.net/LvManBa/article/details/142744369

版权

一、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%