当前位置: 首页 > 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算法需要通过…...

PX4仿真环境搭建全流程:解决roslaunch indoor1.launch报错及Gazebo崩溃问题

PX4仿真环境搭建全流程&#xff1a;从零构建到Gazebo调优实战 无人机仿真开发就像在数字世界里搭建一个飞行实验室&#xff0c;而PX4Gazebo的组合无疑是目前最接近真实飞行体验的虚拟试验场。但当你满怀期待地输入roslaunch indoor1.launch后&#xff0c;等待你的可能不是顺利起…...

如何用Penpot构建完整的用户体验地图和用户旅程:7步打造完美设计流程

如何用Penpot构建完整的用户体验地图和用户旅程&#xff1a;7步打造完美设计流程 【免费下载链接】penpot Penpot - The Open-Source design & prototyping platform 项目地址: https://gitcode.com/GitHub_Trending/pe/penpot Penpot作为开源的设计与原型平台&…...

ArcGIS模型构建器实战:一键加载上百个SHP文件(含子文件夹),告别手动拖拽

ArcGIS模型构建器实战&#xff1a;一键加载上百个SHP文件&#xff08;含子文件夹&#xff09;&#xff0c;告别手动拖拽 当你的硬盘里散落着数百个SHP文件&#xff0c;它们像秋天的落叶一样分布在几十层子文件夹中时&#xff0c;传统的手动拖拽加载方式简直是一场噩梦。上周我接…...

如何用Sunshine打造个人游戏串流中心:跨设备畅玩的终极指南

如何用Sunshine打造个人游戏串流中心&#xff1a;跨设备畅玩的终极指南 【免费下载链接】Sunshine Sunshine: Sunshine是一个自托管的游戏流媒体服务器&#xff0c;支持通过Moonlight在各种设备上进行低延迟的游戏串流。 项目地址: https://gitcode.com/GitHub_Trending/su/S…...

微信公众号开发入门:手把手教你配置接口信息(含服务器设置指南)

微信公众号开发从零到一&#xff1a;接口配置全流程详解 第一次接触微信公众号开发时&#xff0c;很多人会被"接口配置"这个概念吓到。作为一个从零开始摸索过来的开发者&#xff0c;我深知那种面对陌生术语时的茫然感。实际上&#xff0c;接口配置并没有想象中那么复…...

AI赋能Spring开发:借助快马平台快速集成Spring AI,打造智能应用

AI赋能Spring开发&#xff1a;借助快马平台快速集成Spring AI&#xff0c;打造智能应用 Spring生态庞大&#xff0c;新技术集成往往需要查阅大量文档。最近我在尝试将Spring AI集成到项目中&#xff0c;发现这个过程比想象中要复杂得多。好在发现了InsCode(快马)平台&#xff…...

本地图片检索新方案:ImageSearch完全使用指南

本地图片检索新方案&#xff1a;ImageSearch完全使用指南 【免费下载链接】ImageSearch 基于.NET8的本地硬盘千万级图库以图搜图案例Demo和图片exif信息移除小工具分享 项目地址: https://gitcode.com/gh_mirrors/im/ImageSearch 当你的电脑中存储了成千上万张图片&…...

短剧小程序源码:打造你的专属短剧平台

温馨提示&#xff1a;文末有资源合作获取方式&#xff5e;一、市场前景&#xff1a;千亿蓝海&#xff0c;风口正当时“昨晚又为一部短剧熬夜了&#xff01;”这已成为当代年轻人的日常。3分钟一集&#xff0c;连续反转&#xff0c;极致爽点——短剧正以惊人的速度占领我们的碎片…...

跨平台文件同步:OpenClaw+nanobot自动管理NAS文档

跨平台文件同步&#xff1a;OpenClawnanobot自动管理NAS文档 1. 为什么需要自动化文件管理&#xff1f; 作为一个长期被多设备文件同步问题困扰的用户&#xff0c;我一直在寻找一个既安全又灵活的解决方案。我的日常工作涉及MacBook、Windows台式机和家庭NAS之间的文件流转&a…...

Windows10下用VS2019编译UE4.27源码的完整避坑指南(附环境配置截图)

Windows 10下用VS2019编译UE4.27源码的完整避坑指南 第一次在Windows 10上编译UE4.27源码&#xff0c;就像在迷宫中寻找出口——每个转角都可能藏着意想不到的陷阱。作为一位经历过无数次编译失败的老兵&#xff0c;我深知那些看似简单的步骤背后隐藏的魔鬼细节。本文将带你避开…...