VUE3 之 Teleport - 这个系列的教程通俗易懂，适合新手
1. 概述
老话说的好：宰相肚里能撑船，但凡成功的人，都有一种博大的胸怀。
言归正传，今天我们来聊聊 VUE 中 Teleport 的使用。
2. Teleport
2.1 遮罩效果的实现
<style>
.area {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 300px;
background: rgb(16, 209, 48); }
.mask {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #000;
opacity: 50%;
}
</style>
<body>
<div id="myDiv"></div>
</body>
const app = Vue.createApp({
data() {
return {
show : false
}
},
methods: {
handleClick(){
this.show = !this.show;
}
},
template:`
<div class="area">
<button @click="handleClick">按钮</button>
<div class="mask" v-show="show"></div>
</div>
`
});
const vm = app.mount("#myDiv");
这个例子，我们实现了一个简单的遮罩效果，但这个遮罩效果并没有遮罩整个背景，只是遮罩了 area 这个div。
2.2 Teleport 的使用
const app = Vue.createApp({
data() {
return {
show : false
}
},
methods: {
handleClick(){
this.show = !this.show;
}
},
template:`
<div class="area">
<button @click="handleClick">按钮</button>
<teleport to="body" >
<div class="mask" v-show="show"></div>
</teleport>
</div>
`
});
这个例子中，我们改进了一下，使用 <teleport to="body" > 将遮罩的 div 转移到了 body 元素下，因此遮罩范围扩大到了整个 body 的区域。
2.3 Teleport 通过 元素id 转移元素到指定元素下
<body>
<div id="myDiv"></div>
<div id="maskDiv"></div>
</body>
const app = Vue.createApp({
data() {
return {
show : false
}
},
methods: {
handleClick(){
this.show = !this.show;
}
},
template:`
<div class="area">
<button @click="handleClick">按钮</button>
<teleport to="#maskDiv" >
<div class="mask" v-show="show"></div>
</teleport>
</div>
`
});
这个例子中，通过 <teleport to="#maskDiv" > 的写法，将 遮罩div 转移到了 id 是 maskDiv 的元素下。
3. 综述
今天聊了一下 VUE 中 Teleport 的使用，希望可以对大家的工作有所帮助，下一节我们继续讲 Vue 中的高级语法，敬请期待
欢迎帮忙点赞、评论、转发、加关注 ：）
关注追风人聊Java，这里干货满满，都是实战类技术文章，通俗易懂，轻松上手。
4. 个人公众号
追风人聊Java，欢迎大家关注
VUE3 之 Teleport - 这个系列的教程通俗易懂，适合新手的更多相关文章
- VUE3 之 ref、provide、inject 的使用 - 这个系列的教程通俗易懂，适合新手
1. 概述 首因效应告诉我们: 在日常交往中,第一印象是非常重要的,好的第一印象能让我们在与人相处时事半功倍. 但也从另一面告诉我们,不能仅凭第一印象去判断一个人,有时虚假的第一印象,也有可能蒙蔽我们 ...
- VUE3 之 动画与过渡的实现 - 这个系列的教程通俗易懂，适合新手
1. 概述 光环效应告诉我们: 当一个人在某一方面取得了巨大的成功,人们就会给他贴上正面的标签,这个人从此就被"优秀"的光环所笼罩,他做的一切,人们都认为是正确的. 例如:越是名气 ...
- VUE3 之 使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂，适合新手
1. 概述 巴纳姆效应告诉我们: 人们更容易相信笼统的.常见的人格描述,并觉得特别适合自己,认为该描述真实地反映了自己的人格面貌. 这也是所有算命先生的小把戏,算命先生通常把话说的很笼统,很通用,基本 ...
- VUE3 之 使用标签实现动画与过渡效果（下） - 这个系列的教程通俗易懂，适合新手
1. 概述 毛毛虫效应: 有这样一个实验,将许多毛毛虫放在一个花盆边缘,使它们首尾相接,围成一个圈.然后在离花盆很近的地方撒了一些毛毛虫的食物. 此时,毛毛虫并不会向食物的方向爬去,而是在花盆边缘,一 ...
- VUE3 之 多个元素之间的过渡 - 这个系列的教程通俗易懂，适合新手
1. 概述 老话说的好:过去不等于未来,过去成功了不代表将来也会成功,过去失败了也不代表将来也会失败. 言归正传,今天我们聊聊多个元素之间的过渡. 2. 多个元素之间的过渡 2.1 两个元素交替显示 ...
- VUE3 之 列表动画 - 这个系列的教程通俗易懂，适合新手
1. 概述 老话说的好:可以为别人解决痛点的产品就是好产品. 言归正传,今天我们来聊聊 VUE 的列表动画. 2. 列表动画 2.1 列表中增加和删除元素 <style> .my-ite ...
- VUE3 之 状态动画 - 这个系列的教程通俗易懂，适合新手
1. 概述 老话说的好:不用羡慕别人,每个人都有属于自己的人生道路,重要的是在前进道路上遇见阻碍时,如何去积极的面对并解决. 言归正传,今天我们来聊聊 VUE 的状态动画. 2. 状态动画 2.1 数 ...
- VUE3 之 使用 Mixin 实现代码的复用 - 这个系列的教程通俗易懂，适合新手
1. 概述 老话说的好:舍得舍得,先舍才能后得. 言归正传,今天我们来聊聊 VUE 中使用 Mixin 实现代码的复用. 2. Mixin 的使用 2.1 不使用 Mixin 的写法 <body ...
- VUE3 之 全局 Mixin 与 自定义属性合并策略 - 这个系列的教程通俗易懂，适合新手
1. 概述 老话说的好:心态决定命运,好心态才能有好的命运. 言归正传,今天我们来聊聊 VUE 中的全局 Mixin 与 自定义属性合并策略. 2. Mixin 的使用 2.1 全局 Mixin 之前 ...
随机推荐
- ApplicationContext 通常的实现是什么?
FileSystemXmlApplicationContext :此容器从一个 XML 文件中加 载 beans 的定义,XML Bean 配置文件的全路径名必须提供给它的构造函数. ClassPat ...
- 详细描述一下 Elasticsearch 索引文档的过程 ？
这里的索引文档应该理解为文档写入 ES,创建索引的过程. 文档写入包含:单文档写入和批量 bulk 写入,这里只解释一下:单文档写入流程. 记住官方文档中的这个图. 第一步:客户写集群某节点写入数据, ...
- LVS集群和Keepalived高可用实战
第四十章LVS集群和Keepalived高可用实战 一.ARP协议 1.概念 地址解析协议,即ARP(AddressResolutionProtocol),是根据IP地址获取物理MAC地址的一个TCP ...
- 汽车中的V流程开发
各步骤的简介各步骤的简介 (1)Control Design and offline Simulation:算法模型构建和离线仿真(基于模型的设计).算法工程师用Matlab模型实现算法:并实施离线仿 ...
- 决策树3:基尼指数--Gini index（CART）
既能做分类,又能做回归.分类:基尼值作为节点分类依据.回归:最小方差作为节点的依据. 节点越不纯,基尼值越大,熵值越大 pi表示在信息熵部分中有介绍,如下图中介绍 方差越小越好. 选择最小的那个0.3 ...
- int 越界处理
在程序运行中,如果运算结果太大超出了所定义的类型,那么可能会影响整个程序的运行结果,甚至是程序出错. 因此,在编写程序时,加入越界处理就显得一起重要了. 用整型 int 来举个例子吧,int型占四个字 ...
- AWS 6R
"The 6 R's": 6 Application Migration Strategies "The 6 R's": 6 Application Migra ...
- IMWebConf 2017 官网彩蛋解谜
前言 IMWebConf 2017 ←这是官网 然后看到了这个: 所以就试了下,作为一个前端菜鸟,发现通关还挺简单的,不过每个方面的知识都涉及到一点,所以在这里总结一下. 下面进入正题. 第 0 关 ...
- 富文本编辑器CKeditor的配置和图片上传，看完不后悔
CKeditor是一款富文本编辑器,本文将用极为简单的方式介绍一下它的使用和困扰大家很久的图片上传问题,要有耐心. 第一步:如何使用 1.官网下载https://ckeditor.com/ckedit ...
- 彻底弄懂小程序e.target与e.currentTarget
一.小程序中关于事件对象 e 的属性中有两个特别重要的属性:target与currentTarget属性:对于这两个属性,官方文档上的解释是: target:事件源组件对象 currentTarg ...