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 之前 ...
随机推荐
- 两个相同的对象会有不同的的 hash code 吗？
不能,根据 hash code 的规定,这是不可能的.
- 描述 Java 中的重载和重写？
重载和重写都允许你用相同的名称来实现不同的功能,但是重载是编译时活动, 而重写是运行时活动.你可以在同一个类中重载方法,但是只能在子类中重写方 法.重写必须要有继承.
- Invalid prop: type check failed for prop "maxlength"
Invalid prop: type check failed for prop "maxlength", element 框架时,因为想限制文本框的输入长度, maxlength ...
- 【动态系统的建模与分析】9_一阶系统的频率响应_低通滤波器_Matlab/Simulink分析
magnitude response:振幅响应 phase response:相位响应 传递函数G(S)为什么将S看成jw化成G(jw)通过[动态系统的建模与分析]8_频率响应_详细数学推导 G(jw ...
- 云集，让 web app 像 native app 那样运行（雄起吧，Web 开发者）
让 web app 像 native app 那样运行 云集是一个轻应用(即 web app)的运行环境,可以让 web app 像 native app 那样运行. just like this 这 ...
- JS 中的日期时间操作计算实例
实例 一:已知日期格式为 "YYYY/MM/DD",计算相对于今天的天数差. function fromNow(date){ var mTimes = new Date(date) ...
- node-webkit文档翻译#package.json
title: node-webkit文档翻译#package.json date: 2013-12-07 21:38:25 tags: node-webkit 基本示例 { "main&qu ...
- 【论文简读】 Deep web data extraction based on visual
<Deep web data extraction based on visual information processing>作者 J Liu 上海海事大学 2017 AIHC会议登载 ...
- 前端react+redux+koa写的博客推荐
React-Node搭建的博客 曾经用的php+mysql+js写的博客,现在看来已经很low了,所以用目前最火的react+koa框架重构一下.先上地址吧:目前线上版本http://www.liuw ...
- Linux 0.11源码阅读笔记-块设备驱动程序
块设备驱动程序 块设备驱动程序负责实现对块设备数据的读写功能.内核代码统一使用缓冲块间接和块设备(如磁盘)交换数据,缓冲区数据通过块设备驱动程序和块设备交换数据. 块设备的管理 块设备表 内核通过一张 ...