vue3-内置组件-Teleport

Teleport

<Teleport> 是一个内置组件,它可以将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去。

基本用法

有时我们可能会遇到这样的场景:一个组件模板的一部分在逻辑上从属于该组件,但从整个应用视图的角度来看,它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。

这类场景最常见的例子就是全屏的模态框。理想情况下,我们希望触发模态框的按钮和模态框本身是在同一个组件中,因为它们都与组件的开关状态有关。但这意味着该模态框将与按钮一起渲染在应用 DOM 结构里很深的地方。这会导致该模态框的 CSS 布局代码很难写。

试想下面这样的 HTML 结构:

<div class="outer"><h3>Tooltips with Vue 3 Teleport</h3><div><MyModal /></div>
</div>

接下来我们来看看 <MyModal> 的实现:

<script setup>
import { ref } from 'vue'const open = ref(false)
</script><template><button @click="open = true">Open Modal</button><div v-if="open" class="modal"><p>Hello from the modal!</p><button @click="open = false">Close</button></div>
</template><style scoped>
.modal {position: fixed;z-index: 999;top: 20%;left: 50%;width: 300px;margin-left: -150px;
}
</style>

这个组件中有一个 <button> 按钮来触发打开模态框,和一个 class 名为 .modal 的 <div>,它包含了模态框的内容和一个用来关闭的按钮。

当在初始 HTML 结构中使用这个组件时,会有一些潜在的问题:

position: fixed 能够相对于浏览器窗口放置有一个条件,那就是不能有任何祖先元素设置了 transform、perspective 或者 filter 样式属性。也就是说如果我们想要用 CSS transform 为祖先节点 <div class="outer"> 设置动画,就会不小心破坏模态框的布局!

这个模态框的 z-index 受限于它的容器元素。如果有其他元素与 <div class="outer"> 重叠并有更高的 z-index,则它会覆盖住我们的模态框。

<Teleport> 提供了一个更简单的方式来解决此类问题,让我们不需要再顾虑 DOM 结构的问题。让我们用 <Teleport> 改写一下 <MyModal>:

<button @click="open = true">Open Modal</button><Teleport to="body"><div v-if="open" class="modal"><p>Hello from the modal!</p><button @click="open = false">Close</button></div>
</Teleport>

<Teleport> 接收一个 to prop 来指定传送的目标。to 的值可以是一个 CSS 选择器字符串,也可以是一个 DOM 元素对象。这段代码的作用就是告诉 Vue“把以下模板片段传送到 body 标签下”。

我们也可以将 <Teleport> 和 <Transition> 结合使用来创建一个带动画的模态框。

<Teleport> 挂载时,传送的 to 目标必须已经存在于 DOM 中。理想情况下,这应该是整个 Vue 应用 DOM 树外部的一个元素。如果目标元素也是由 Vue 渲染的,你需要确保在挂载 <Teleport> 之前先挂载该元素。

我们也可以将 <Teleport> 和 <Transition> 结合使用来创建一个带动画的模态框。

// 模态组件
<script setup>
const props = defineProps({show: Boolean
})
</script><template><Transition name="modal"><div v-if="show" class="modal-mask"><div class="modal-container"><div class="modal-header"><slot name="header">默认头部</slot></div><div class="modal-body"><slot name="body">默认内容</slot></div><div class="modal-footer"><slot name="footer">默认底部</slot></div><button class="modal-default-button" @click="$emit('close')">OK</button></div></div></Transition>
</template><style>
....
....
....
样式太多省略了 看效果图即可
...
...
...
</style>// 父级页面
<script lang="ts" setup>
import { ref } from 'vue'import Com24 from '@/components/demo/Com24.vue'
const showModal = ref(false)
</script><template><div class="container"><button id="show-modal" @click="showModal = true">开启模态窗</button><Teleport to="body"><!-- 使用这个 modal 组件,传入 prop --><Com24 :show="showModal" @close="showModal = false"><template #header><h3>自定义标题</h3></template></Com24></Teleport></div>
</template><style lang="scss" scoped>
.container {
}
</style>

搭配组件使用

<Teleport> 只改变了渲染的 DOM 结构,它不会影响组件间的逻辑关系。也就是说,如果 <Teleport> 包含了一个组件,那么该组件始终和这个使用了 <teleport> 的组件保持逻辑上的父子关系。传入的 props 和触发的事件也会照常工作。

这也意味着来自父组件的注入也会按预期工作,子组件将在 Vue Devtools 中嵌套在父级组件下面,而不是放在实际内容移动到的地方。

禁用 Teleport

在某些场景下可能需要视情况禁用 <Teleport>。举例来说,我们想要在桌面端将一个组件当做浮层来渲染,但在移动端则当作行内组件。我们可以通过对 <Teleport> 动态地传入一个 disabled prop 来处理这两种不同情况。

<Teleport :disabled="isMobile">...
</Teleport>

这里的 isMobile 状态可以根据 CSS media query 的不同结果动态地更新。

多个 Teleport 共享目标

一个可重用的模态框组件可能同时存在多个实例。对于此类场景,多个 <Teleport> 组件可以将其内容挂载在同一个目标元素上,而顺序就是简单的顺次追加,后挂载的将排在目标元素下更后面的位置上。

<Teleport to="#modals"><div>A</div>
</Teleport>
<Teleport to="#modals"><div>B</div>
</Teleport>

渲染的结果为:

<div id="modals"><div>A</div><div>B</div>
</div>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/675382.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

自然语言NLP

什么是NLP NLP&#xff08;Natural Language Processing&#xff09;是自然语言处理的缩写&#xff0c;是计算机科学和人工智能领域的一个研究方向。NLP致力于使计算机能够理解、处理和生成人类自然语言的能力。通过NLP技术&#xff0c;计算机可以通过识别和理解语言中的文本…

基于Linux操作系统的Docker容器安装MySQL随笔

1、在Linux上安装Docker容器 cd /etc/yum.repos.d/ curl -O https://download.docker.com/linux/centos/docker-ce.repo sed -i s/$releasever/8/g docker-ce.repo yum install -y docker-ce 2、修改Docker默认镜像仓库&#xff0c;然后启动Docker容器 sudo mkdir -p /etc/do…

yolov8自制数据训练集

目录 1.YOLOv8是啥 2.系统环境 3.安装labelimg 3.1安装 3.2启动 labelimg 4.自制分类图片 4.1 YOLO数据集要求 4.2 图片保存目录 4.3 利用labelimg进行标注 4.4 存储图片 4.5 标注文件 5.数据集训练 5.1yaml文件 5.2训练命令 5.3查看训练过程 5.3.1启动tensorb…

c#通过反射完成对象自动映射

在 C# 中&#xff0c;可以使用 AutoMapper 库来完成对象之间的映射&#xff0c;而不必手动编写显式的映射代码。但是&#xff0c;如果你希望通过反射来动态完成对象的映射&#xff0c;你可以编写自己的映射逻辑并使用反射来完成这个过程。 下面是一个简单的示例&#xff0c;演…

2. 四平方和

题目描述 四平方和定理&#xff0c;又称为拉格朗日定理&#xff1a; 每个正整数都可以表示为至多 4 4 4 个正整数的平方和。 如果把 0 0 0 包括进去&#xff0c;就正好可以表示为 4 4 4 个数的平方和。 比如&#xff1a; 5 0 2 0 2 1 2 2 2 50^20^21^22^2 502021222 7…

实例分割论文阅读之:FCN:《Fully Convolutional Networks for Semantica Segmentation》

论文地址:https://openaccess.thecvf.com/content_cvpr_2015/papers/Long_Fully_Convolutional_Networks_2015_CVPR_paper.pdf 代码链接&#xff1a;https://github.com/pytorch/vision 摘要 卷积网络是强大的视觉模型&#xff0c;可以产生特征层次结构。我们证明&#xff0c…

Qt网络编程-TCP与UDP

网络基础 TCP与UDP基础 关于TCP与UDP的基础这里就不过多介绍了&#xff0c;具体可以查看对应百度百科介绍&#xff1a; TCP&#xff08;传输控制协议&#xff09;_百度百科 (baidu.com) UDP_百度百科 (baidu.com) 需要知道这两者的区别&#xff1a; 可靠性&#xff1a; TC…

每天一个数据分析题(一百五十七)

当对多个连续型变量进行主成分分析&#xff08;PCA&#xff09;以降维并且简化数据时&#xff0c;以下哪项原则通常被用来决定应当保留多少个主成分&#xff1f; A. 保留的主成分个数应当使得累积方差解释比例至少达到50%。 B. 保留的主成分个数应当使得每个主成分的特征值大…

Java面向对象 方法的重写

目录 重写重写的规则实例创建Person类创建Student类测试 重载和重写的区别 重写 发生在子类和父类中&#xff0c;当子类对父类提供的方法不满意的时候&#xff0c;要对父类的方法进行重写。 重写的规则 子类的方法名字和父类必须一致&#xff0c;参数列表&#xff08;个数&…

IMU模型介绍

IMU模型 中文名惯性测量单元。 与一般的认知不同&#xff0c;机器人状态估计问题一般将IMU的测量作为运动信息&#xff0c;根据运动方程预测状态&#xff0c;这与里程计相似&#xff0c;尽管是传感器&#xff0c;但被看成执行器&#xff08;当然与真正的执行机构是不同的&…

15章-Python编程:从入门到实践

第15章生成数据 数据可视化指的是通过可视化表示来探索数据&#xff0c;它与数据挖掘数紧密相关&#xff0c;而数据挖掘指的是使用代码来探索数据集的规律和关联。 数据集可以是用一行代码就能表示的小型数字列表&#xff0c;也可以是数以吉字节的数据。漂亮地呈现数据关乎的并…

List 差集

文章目录 基本类型对象类型 基本类型 ListUtils.subtract 方法用于计算两个集合的差集&#xff0c;即返回 list1 中有但 list2 中没有的元素。 其中&#xff0c;list1 指向第一个集合&#xff0c;list2 指向第二个集合。该方法返回一个新的 List 对象&#xff0c;它包含所有在…

C++:二叉搜索树模拟实现(KV模型)

C&#xff1a;二叉搜索树模拟实现&#xff08;KV模型&#xff09; 前言模拟实现KV模型1. 节点封装2、前置工作&#xff08;默认构造、拷贝构造、赋值重载、析构函数等&#xff09;2. 数据插入&#xff08;递归和非递归版本&#xff09;3、数据删除&#xff08;递归和非递归版本…

开源免费的物联网网关 IoT Gateway

1. 概述 物联网网关&#xff0c;也被称为IOT网关&#xff0c;是一种至关重要的网络设备。在物联网系统中&#xff0c;它承担着连接和控制各种设备的重要任务&#xff0c;将这些设备有效地连接到云端、本地服务器或其他设备上。它既能够在广域范围内实现互联&#xff0c;也能在…

P1297 [国家集训队] 单选错位 对期望的理解

[国家集训队] 单选错位 - 洛谷 思路&#xff1a; 其实每个位置的得分只和前一个位置有关。 而他们俩的所有情况的期望就是答案的这部分。 ——这是难想的&#xff0c;我期望学的不好。 &#xff08;题目给的是每种情况的所有位置的和&#xff0c;全加起来是答案&#xff1…

【龙年大礼】| 2023中国开源年度报告!

【中国开源年度报告】由开源社从 2015 年发起&#xff0c;是国内首个结合多个开源社区、高校、媒体、风投、企业与个人&#xff0c;以纯志愿、非营利的理念和开源社区协作的模式&#xff0c;携手共创完成的开源研究报告。后来由于一些因素暂停&#xff0c;在 2018 年重启了这个…

基于 Python opencv 的人脸识别的酒店客房入侵系统的检测

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12W、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

掌握C++中的动态数据:深入解析list的力量与灵活性

1. 引言 简介std::list和其在C中的角色 std::list是C标准模板库&#xff08;STL&#xff09;中提供的一个容器类&#xff0c;实现了双向链表的数据结构。与数组或向量等基于连续内存的容器不同&#xff0c;std::list允许非连续的内存分配&#xff0c;使得元素的插入和删除操作…

排序算法---插入排序

原创不易&#xff0c;转载请注明出处。欢迎点赞收藏~ 插入排序是一种简单直观的排序算法&#xff0c;它的基本思想是将待排序的元素分为已排序和未排序两部分&#xff0c;每次从未排序部分中选择一个元素插入到已排序部分的合适位置&#xff0c;直到所有元素都插入到已排序部分…

php 如何判断是否上传了文件、图片

假设前端有字段 <input type"file" name"user_avatar_image"/> php使用$_FILES进行判断 1. 当没有文件上传时&#xff0c;打印$_FILES ^ array:1 [▼"user_profile_image" > array:5 [▼"name" > """ty…