VUE3 之 Teleport - 这个系列的教程通俗易懂，适合新手
2024-09-08 04:52:50
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，欢迎大家关注
最新文章
- sublime 相关配置
- android 设颜色透明值
- Spring Data JPA @EnableJpaRepositories配置详解
- Oracle定时计划快速使用
- [BZOJ3156]防御准备（斜率优化DP）
- StringBuilder和StringBuffer区别
- ***Linux文件夹文件创建、删除、改名
- Python 从sketch中读取文件
- Yii框架页面运行流程
- When Is Cheryl's Birthday
- win下安装Redmine常见错误解决方案
- 201521123106 《Java程序设计》第10周学习总结
- “认证发布”和“获取展示”，如何在 SharePoint 中正确使用 RSS Feed。
- 【原创】InputStream has already been read - do not use InputStreamResource if a stream needs to be read multiple times
- Git GUI可视化操作教程
- SenseTime Ace Coder Challenge 暨 商汤在线编程挑战赛 A. 地铁站
- dede导航栏目调用
- 关于Cocos2d-x中背景音乐和音效的添加
- gluoncv faster_rcnn 参数修改
- untiy3d学习笔记