当前位置: 首页 > news >正文

学习vue3第十四节 Teleport 内置组件介绍

<Teleport></Teleport>  

作用目的:

用于将指定的组件或者元素传送到指定的位置;
通常是自定义的全局通用弹窗,绑定到 body 上,而不是在当前元素上面;

使用方法:

接收两个参数
to: 要将目标传到的位置; 可以是指定的元素、class、id
disabled: 是否禁止将目标传送到指定位置;Boolean

比如:

<Teleport 
to="body"
disabled="true"
></Teleport>

而为什么要使用teleport 内置组件呢?

比如:有这样一个需求,我们需要一个盒子顺时针旋转 45度;而这个盒子同时是一个弹窗的父级组件,并且这个盒子可以打开改弹窗;

父组件:

<template>
<div class="my-built-in"><!-- 内置组件 --><div class="other-place" @click="handleOpen">其他dom位置<TelDialog :isShowTel="isShowTel":telCon="telCon" @onCloseDialog="handleClose"></TelDialog></div>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import TelDialog from './components/telDialog.vue'
const isShowTel = ref(false)
const telCon = ref('This is a Teleport component.')
const handleClose = () => {isShowTel.value = false
}
const handleOpen = () => {isShowTel.value = true
}
</script>
<style lang='scss' scoped>
.my-built-in{position: relative;width: 100px;height: 100px;background-color: #00ff00;left: 200px;transform: rotate(45deg);
}</style>

弹窗组件:

<template><div class="my-tel-container" v-if="props.isShowTel"><div class="my-tel-title">Teleport 弹窗</div><div class="my-tel-content">{{ props.telCon }}</div><div class="my-tel-foot"><el-button type="primary" class="close-btn" @click="handleClose">关闭teleport 弹窗</el-button></div></div>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({isShowTel:{type: Boolean,default: false,},telCon: {type: String,default: ''}
})
const emits = defineEmits(['onCloseDialog'])
const handleClose = () => {emits('onCloseDialog')
}
</script>
<style lang='scss' scoped>
.my-tel-container{position: fixed;top:50%;left: 50%;width: 440px;height: auto;background-color: aqua;box-shadow: 0 2px 4px 0 rgba(0,0,0, .3);box-sizing: border-box;padding: 0 16px 16px;.my-tel-title{width: 100%;height: 46px;text-align: center;line-height: 46px;font-size: 16px;color: #333;}.my-tel-content{width: 100%;height: 200px;}.my-tel-foot{width: 100%;height: 46px;display: flex;justify-content: right;align-content: center;}
}
</style>

我们会发现写好之后在没有使用teleport 组件的情况下 弹窗也跟着旋转了45度,这并不是我们想要的;为什么会出现这种情况呢?
如图:
请添加图片描述

我们需要的是即使父组件发上了旋转 位移等,弹窗依然是位于浏览器的正中央;
此时我们就可以通过 <Teleport></Teleport> 组件来将弹窗组件实际渲染的位置更改到 body 上;但是这样并不影响 组件直接的通讯;

更改父组件为:

<template>
<div class="my-built-in"><!-- 内置组件 --><div class="other-place" @click="handleOpen">其他dom位置<!-- **只需要添加 Teleport 组件即可,disabled 接收一个布尔值,默认是falsetrue代表不传送到指定位置 body上** --><Teleport to="body" :disabled="false"><TelDialog :isShowTel="isShowTel":telCon="telCon" @onCloseDialog="handleClose"></TelDialog></Teleport></div>
</div>
</template>

请添加图片描述

注意事项:

a、在使用teleport 组件时,需要确保传送的位置dom已经渲染完成,即to的位置dom已完成渲染,否则将无法实现传送;
b、同时可以通过给disabled 动态传入一个Boolean 值,来控制是否要将元素或dom传送到指定的位置;

相关文章:

学习vue3第十四节 Teleport 内置组件介绍

<Teleport></Teleport> 作用目的&#xff1a; 用于将指定的组件或者元素传送到指定的位置&#xff1b; 通常是自定义的全局通用弹窗&#xff0c;绑定到 body 上&#xff0c;而不是在当前元素上面&#xff1b; 使用方法&#xff1a; 接收两个参数 to: 要将目标传…...

mybatis模糊查询查不到数据

排除SQL语句本身存在错误,字段名称不匹配,编码格式问题后,若使用%方式查询,一开始使用单引号查询不到数据&#xff0c;把改成"&#xff0c;可以查询到数据 疑问&#xff1a;看别人的代码&#xff0c;使用单引号也可以查询到数据&#xff0c;原因未知...

Python语法总结:not(常出现错误)

0、not是什么 在python中not是逻辑判断词&#xff0c;用于布尔型True和False之前 a not Ture # a False b not False # b True1、not的用法 &#xff08;1&#xff09;判断语句 if not a:# 如果a是False&#xff0c;执行的语句&#xff08;2&#xff09;判断元素是否在…...

深入理解WebSocket:实时双向通信的利器

一、介绍 1.1 基础概念介绍 单工通信&#xff1a;数据传输只允许在一个方向上传输&#xff0c;只能一方发送数据&#xff0c;另一方接收数据并发送。半双工&#xff1a;数据传输允许两个方向上的传输&#xff0c;但在同一时间内&#xff0c;只可以有一方发送或接收数据。全双…...

Gateway是什么?(SpringCloudAlibaba组件)

1、网关介绍 **网关(Gateway)又称网间连接器、协议转换器。网关在传输层上以实现网络互连&#xff0c;是最复杂的网络互连设备&#xff0c;仅用于两个高层协议不同的网络互连。**网关的结构也和路由器类似&#xff0c;不同的是互连层。网关既可以用于广域网互连&#xff0c;也可…...

阿里巴巴拍立淘API新功能揭秘:图片秒搜商品,实现智能化个性化购物新体验

在数字化快速发展的今天&#xff0c;智能化和个性化已经成为购物体验中不可或缺的元素。为了满足消费者日益增长的购物需求&#xff0c;阿里巴巴中国站不断推陈出新&#xff0c;其中拍立淘API的新功能——图片秒搜商品&#xff0c;无疑为智能化个性化购物体验开创了新的篇章。 …...

蚓链为移动实体经济加油!

在当今数字化时代&#xff0c;数据已成为企业宝贵的资产之一。如何利用数据资产为可移动实体经济创造更多的增值机会呢&#xff1f;蚓链将为你揭示 11种行之有效的方法&#xff01; 1. 个性化服务&#xff1a;根据客户数据&#xff0c;提供量身定制的产品和服务&#xff0c;满…...

MySQL 核心模块揭秘 | 12 期 | 创建 savepoint

回滚操作&#xff0c;除了回滚整个事务&#xff0c;还可以部分回滚。部分回滚&#xff0c;需要保存点&#xff08;savepoint&#xff09;的协助。本文我们先看看保存点里面都有什么。 作者&#xff1a;操盛春&#xff0c;爱可生技术专家&#xff0c;公众号『一树一溪』作者&…...

SpringMVC --- 老杜

1、什么是SpringMVC&#xff1f; SpringMVC是一个基于Java实现了MVC设计模式的请求驱动类型的轻量级Web框架&#xff0c;通过把Model&#xff0c;View&#xff0c;Controller分离&#xff0c;将web层进行职责解耦&#xff0c;把复杂的web应用分成逻辑清晰的及部分&#xff0c;…...

详细介绍如何利用 A star(A*)算法解决8数码问题

文章目录 1. A star(A*)算法简介2. 利用A*解决8数码问题(含Python代码)2.1 什么是8数码问题2.2 A*算法中的开放列表和关闭列表2.3 A*算法解决8数码问题过程2.3.1 计算节点(棋盘顺序)间距离2.3.2 交换数字生成新的节点2.3.3 A*主求解程序1. A star(A*)算法简介 A ∗ A^*…...

如何锁定鼠标光标在水平、垂直或45度对角线模式下移动 - 鼠标水平垂直移动锁定器简易教程

在我们进行精细工作例如如创建图标和图形设计时&#xff0c;通常需要我们对鼠标移动进行精确控制。一旦向左或向右轻微移动&#xff0c;都可能导致设计出错。若出现不必要的错误&#xff0c;我们极有可能不得不重新开始&#xff0c;这会令人感到非常沮丧。这种情况下&#xff0…...

在 Docker 部署的 MySQL 容器内安装和使用 vim

在 Docker 部署的 MySQL 容器内安装和使用 vim 文章目录 在 Docker 部署的 MySQL 容器内安装和使用 vim步骤一&#xff1a;进入 MySQL 容器步骤二&#xff1a;更新软件源和安装 vim步骤三&#xff1a;验证 vim 安装步骤四&#xff1a;使用 vim 进行文件编辑步骤五&#xff1a;保…...

人工智能|深度学习——基于Xception实现戴口罩人脸表情识别

一、项目背景 近年来&#xff0c;随着人工智能技术的不断发展&#xff0c;人脸表情识别已经成为了计算机视觉领域中的重要研究方向之一。然而&#xff0c;在当前的疫情形势下&#xff0c;佩戴口罩已经成为了一项必要的防疫措施&#xff0c;但是佩戴口罩会遮挡住人脸的部分区域&…...

【HTML】简单制作一个动态3D正方体

目录 前言 开始 HTML部分 JS部分 CSS部分 效果图 总结 前言 无需多言&#xff0c;本文将详细介绍一段代码&#xff0c;具体内容如下&#xff1a; 开始 首先新建文件夹&#xff0c;创建两个文本文档&#xff0c;其中HTML的文件名改为[index.html]&#xff0c;JS的文件名改…...

Linux 常用指令及其理论知识

个人主页&#xff1a;仍有未知等待探索-CSDN博客 专题分栏&#xff1a;http://t.csdnimg.cn/Tvyou 欢迎各位指教&#xff01;&#xff01;&#xff01; 目录 一、理论知识 二、基础指令 1、ls指令&#xff08;列出该目录下的所有子目录和文件&#xff09; 语法&#xff1a; …...

论文阅读——Sat2Vid

Sat2Vid: Street-view Panoramic Video Synthesis from a Single Satellite Image 提出了一种新颖的方法&#xff0c;用于从单个卫星图像和摄像机轨迹合成时间和几何一致的街景全景视频。 即根据单个卫星图像和给定的观看位置尽可能真实地、尽可能一致地合成街景全景视频序列。…...

js怎样判断status

相信大家都知道Switch开关吧&#xff0c;他有两种状态&#xff0c;通常用1/2表示&#xff0c;开启时为true&#xff0c;关闭时为false&#xff0c;那么我们该怎样判断他是否为开启还是关闭你? 我们可以声明一个变量&#xff0c;让它等于status&#xff0c;判断它是否等于1/2&…...

多态.Java

&#xff08;1&#xff09;什么是多态&#xff1f; 同类型的对象&#xff0c;表现出不同的形态。前者指父类&#xff0c;后者指不同的子类 说简单点&#xff0c;就是父类的同一种方法&#xff0c;可以在不同子类中表现出不同的状态&#xff0c;或者说在不同子类中可以实现不同…...

SSL根证书是什么

根证书是什么&#xff1f; 根证书是CA认证中心给自己颁发的证书,是信任链的起始点。安装根证书意味着对这个CA认证中心的信任。 从技术上讲&#xff0c;证书其实包含三部分&#xff0c;用户的信息&#xff0c;用户的公钥&#xff0c;还有CA中心对该证书里面的信息的签名&#…...

大模型量化技术-GPTQ

大模型量化技术-GPTQ 2022年,Frantar等人发表了论文 GPTQ:Accurate Post-Training Quantization for Generative Pre-trained Transformers。 这篇论文详细介绍了一种训练后量化算法,适用于所有通用的预训练 Transformer模型,同时只有微小的性能下降。 GPTQ算法需要通过…...

python-flask-djangol框架的青少年编程学习平台

目录技术选型与架构设计功能模块划分开发阶段规划安全与扩展性示例代码片段&#xff08;Flask路由&#xff09;部署与运维教育适配项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作技术选型与架构设计 采用Python生态的Flask或D…...

苹果全球推出关键MDM工具和企业服务

随着苹果在企业市场份额的稳步增长&#xff0c;该公司终于在美国以外地区推出了其面向中小型企业&#xff08;SMB&#xff09;的实用服务集合Apple Business Essentials&#xff0c;但这次它不再叫Apple Business Essentials&#xff0c;而且其中大部分服务都将免费提供。Apple…...

Pixel Fashion Atelier惊艳案例:‘赛博神社’主题皮装在明亮城镇UI下的生成

Pixel Fashion Atelier惊艳案例&#xff1a;‘赛博神社’主题皮装在明亮城镇UI下的生成 1. 项目概览 Pixel Fashion Atelier&#xff08;像素时装锻造坊&#xff09;是一款基于Stable Diffusion与Anything-v5的图像生成工作站。与传统AI工具不同&#xff0c;它采用了复古日系…...

别再死记硬背PCA公式了!用Python+Open3D实战点云法向量估计(附代码)

用Python实战点云法向量估计&#xff1a;从数学原理到Open3D实现 点云处理是计算机视觉和三维重建中的基础任务&#xff0c;而法向量估计则是理解点云局部几何特征的关键步骤。传统教学中&#xff0c;PCA&#xff08;主成分分析&#xff09;往往被简化为一堆数学公式&#xff…...

数据清洗避坑指南:缺失值和异常值处理的5个常见错误(附真实案例)

数据清洗避坑指南&#xff1a;缺失值和异常值处理的5个常见错误&#xff08;附真实案例&#xff09; 在电商平台的用户行为分析中&#xff0c;我们曾遇到一个诡异现象&#xff1a;某促销活动页面的转化率突然飙升到98%。进一步排查发现&#xff0c;是爬虫程序将未加载完成的页…...

别再死记硬背了!用Python和SymPy库5分钟可视化理解泰勒公式的逼近过程

用Python动态可视化泰勒公式&#xff1a;5行代码理解多项式逼近本质 数学公式的抽象性常常成为学习者的障碍&#xff0c;尤其是泰勒公式这种涉及无限逼近概念的内容。传统的静态图示和理论推导虽然严谨&#xff0c;却难以直观展示"以直代曲"的动态过程。本文将用Pyth…...

PlayCover如何重塑Mac游戏体验?社交与云服务革新玩法深度解析

PlayCover如何重塑Mac游戏体验&#xff1f;社交与云服务革新玩法深度解析 【免费下载链接】PlayCover Community fork of PlayCover 项目地址: https://gitcode.com/gh_mirrors/pl/PlayCover PlayCover作为一款开源的Mac iOS模拟器&#xff0c;通过深度整合Discord社交功…...

Dramatron:AI驱动剧本创作的协同进化方法

Dramatron&#xff1a;AI驱动剧本创作的协同进化方法 【免费下载链接】dramatron Dramatron uses large language models to generate coherent scripts and screenplays. 项目地址: https://gitcode.com/gh_mirrors/dr/dramatron 问题&#xff1a;当代创作者的三重困境…...

SAP资产主数据批量修改避坑大全:GGB1替代+AR31工作清单配置详解(含日期字段特殊处理)

SAP资产主数据批量修改实战指南&#xff1a;从GGB1替代到AR31工作清单全流程解析 当财务团队需要对上千条资产记录进行成本中心迁移时&#xff0c;手工修改不仅效率低下&#xff0c;还容易产生数据不一致。SAP系统提供的GGB1替代规则与AR31工作清单组合方案&#xff0c;正是解决…...

从YAML到PyTorch模型:拆解Ultralytics YOLO V8/V11中`parse_model`函数的完整工作流

从YAML到PyTorch模型&#xff1a;拆解Ultralytics YOLO V8/V11中parse_model函数的完整工作流 在计算机视觉领域&#xff0c;YOLO系列模型因其卓越的实时检测性能而广受开发者青睐。Ultralytics团队推出的YOLO V8/V11版本不仅延续了这一优势&#xff0c;更通过精心设计的配置文…...