vue3 基础-传送门 teleport
之前介绍了一波混入 mixin 和 自定义指令 directive 其基本作用就是为了在 vue 中实现代码的复用. 而本篇介绍的是 vue3 的一个新特性叫做传送门.
一听这个名字是不是就感觉特别科幻呢? 小时候看哆啦A梦的就经常使用传送门, 只要心里想着那个地方, 就能直接穿越过去. 然后就是在漫威宇宙中奇异博士的传送门啦, 想去哪就画个圈圈传送过去哦.
在 vue 中就表现为对一个 dom 进行有目的的直接传送啦, 这里我们以一个局部的蒙层来做演示:
<!DOCTYPE html>
<html lang="en">
<head>
<title>蒙层</title>
<script src="https://unpkg.com/vue@3"></script>
<style>
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 300px;
background: skyblue;
}
.mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .25);
}
</style>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
show: false
}
},
methods: {
handleClick () {
this.show = !this.show
}
},
template: `
<div class="box">
<button @click="handleClick">点我变蒙层</button>
<div class="mask" v-show="show"></div>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
可以发现在这个200 x 300px 的浅蓝色 box 中, 当我们点击 "点我变蒙层" 的按钮时, 只会作用于这个内部盒子而不会作用整个页面, 因为咱这个 mask 就是写在 box 中的嘛.
template: `
<div class="box">
<button @click="handleClick">点我变蒙层</button>
<div class="mask" v-show="show"></div>
</div>
`
而要实现整个页面的效果, 则咱需要将这个 mask 作用到 body 中去, 或者说将其直接"传送"到 body 下面哦.
传送门演示
来了老铁, 直接将这个 mask 传递到 body 哦, 即通过 teleport 这个标签来安排.
<!DOCTYPE html>
<html lang="en">
<head>
<title>传送门 teleport </title>
<script src="https://unpkg.com/vue@3"></script>
<style>
.box {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 300px;
background: skyblue;
/* 让按钮的优先级增加以至于蒙层后不被覆盖掉 */
z-index: 2;
}
.mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, .25);
}
</style>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
show: false
}
},
methods: {
handleClick () {
this.show = !this.show
}
},
template: `
<div class="box">
<button @click="handleClick">点我变蒙层</button>
<teleport to="body">
<div class="mask" v-show="show"></div>
</teleport>
</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
其核心就是这里的 teleplort 标签的包裹和 to 这个传送到哪啦.
template: `
<div class="box">
<button @click="handleClick">点我变蒙层</button>
<teleport to="body">
<div class="mask" v-show="show"></div>
</teleport>
</div>
`
当然也可以传送到比如模板中有一个 ID 为 youge 的标签中:
<teleport to="#youge">
<div class="mask" v-show="show"></div>
</teleport>
当然除了传蒙层, 对于其他的一些场景如 tab 块呀, 组件呀, dom 内容呀, 都是可以通过 teleport 进行传送的, 与我而言, 其好奇的科幻程度远大于应用程度啦. 那关于传送门的基本认知就先到这里啦.
小结
- 传送门就是将某个 dom 或组件等能够传递到该模板的任意位置中, 类似奇异博士的传送门
- 实现上就在 dom / 组件 外包裹一层 teleport 标签, to="选送的位置, 选择器" 即可
- 好奇和科幻的程度远大于对它的实际应用程度啦
vue3 基础-传送门 teleport的更多相关文章
- vue3基础
什么是CDN? 内容分发网络--通过相互链接的网络系统,利用最靠近用户的服务器,更快更可靠的发送给用户. vue的cdn引入 method中的函数为什么不能用this? this的主要使用是来获取da ...
- vue3 高阶 API 大汇总，强到离谱
高阶函数是什么呢? 高阶函数英文名叫:Higher Order function ,一个函数可以接收一个或多个函数作为输入,或者输出一个函数,至少满足上述条件之一的函数,叫做高阶函数. 前言 本篇内容 ...
- Vue3 中有哪些值得深究的知识点？
众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点.喜欢的话建议收藏,点个关注! 1.createApp vue2 和 vue3 在创建实例 ...
- JELLY技术周刊 Vol.23: Vue3 是伟大航路上的 One Piece 么？
蒲公英 · JELLY技术周刊 Vol.23 这两天大家应该都被 Vue 发布 3.0 版本的信息刷屏了,背负着很多人的期待, Vue 终于将这个船新版本推到台前,接受大众的检验,那么这个代号为 On ...
- 简单对比vue2.x与vue3.x响应式及新功能
简单对比vue2.x与vue3.x响应式 对响应方式来讲:Vue3.x 将使用Proxy ,取代Vue2.x 版本的 Object.defineProperty. 为何要将Object.defineP ...
- vue3知识点的自我总结
1. 我们对ref的错误理解 ref 经常去监听基本数据类型. 同时也可以去监听[数组][对象]都是可以的. ref是深度的监听.并不是大家说的那样不能去监听复杂的数据类型. 只是根据我们推荐ref去 ...
- Vue3.0聊天室|vue3+vant3仿微信聊天实例|vue3.x仿微信app界面
一.项目简介 基于Vue3.0+Vant3.x+Vuex4.x+Vue-router4+V3Popup等技术开发实现的仿微信手机App聊天实例项目Vue3-Chatroom.实现了发送图文表情消息/g ...
- 【废弃中】【WIP】JavaScript 数组
创建: 2018/01/22 更新: 2018/05/20 把此博文加入[javascript]分类, 原来忘记了 废弃: 2019/02/19 重构此篇.原文归入废弃 增加[废弃中]标签与总体任务 ...
- Vue+Antd搭配百度地图实现搜索定位等功能
前言 最近,在做vue项目的时候有做到选择地址功能,而原项目中又引入了百度地图,所以我就打算通过使用百度地图来实现地址搜索功能啦. 本次教程可能过于啰嗦,所以这里先放上预览地址供大家预览--点我预览, ...
- 极速上手 VUE 3 —— teleport传送门组件
一.teleport 介绍 teleport 传送门组件,提供一种简洁的方式,可以指定它里面的内容的父元素.通俗易懂地讲,就是 teleport 中的内容允许我们控制在任意的DOM中,使用简单. 使用 ...
随机推荐
- [FJOI2016] 建筑师 题解
显然有一个 \(dp\) 思路.设 \(f_{i,j}\) 表示现在修了 \(i\) 栋楼,从第一栋楼外侧能看到 \(j\) 栋楼的方案数,显然有: \[f_{i,j}=\begin{cases}[i ...
- 安川MOTOMAN机器人NX100维修的注意事项
安川MOTOMAN机器人NX100维修,操作人员安全注意事项 整个机器人的最大动作范围内均具有潜在的危险性. 为机器人工作的所有人员 (安全管理员.安装人员.操作人员和机器人维修人员) 必须时刻树 ...
- CentOS安装nginx服务器及配置反向代理
以下是在CentOS上安装nginx服务器并配置反向代理的步骤: 更新系统软件包: sudo yum update 安装nginx: sudo yum install nginx 启动nginx服务: ...
- ES - 概述
前言 Q1:ElasticSearch 是什么? 为什么要学习? ElasticSearch 是一个分布式.可扩展.实时的搜索和分析引擎,基于 Lucene 构建.它可以用于全文搜索.结构化搜索.分析 ...
- AngleSharp ：在 C# 中轻松解析和操作 HTML/XML 文档
AngleSharp 是一个 C# 库,主要用于解析和操作 HTML 和 XML 文档,类似于浏览器的 DOM 操作.允许你在 C# 中使用类似浏览器的方式处理网页数据,进行网页抓取.数据提取和处理等 ...
- 基于 Trae Claude-3.7 从0到1 打造加密货币钱包Dompet-App
从0到1:用Trae Claude-3.7打造加密货币钱包Dompet-App 项目介绍 大家好!今天我要分享如何使用强大的AI助手Trae Claude-3.7,从零开始构建一款功能丰富的加密货币钱 ...
- 基于融合语义信息改进的内容推荐算法。Improved content recommendation algorithm integrating semantic information
引言 路漫漫其修远兮,吾将上下而求索.每天一篇论文,做更好的自己. 本文读的这篇论文为发表于2023年5月28日的一篇名为<基于融合语义信息改进的内容推荐算法>(基于融合语义信息改进的内容 ...
- 非容器环境中使用Selenium，提升Chrome与ChromeDiver兼容性
背景 在 Windows 环境下使用 Selenium 时,Chrome 浏览器版本与 ChromeDriver 版本的兼容性问题是一个常见的困扰. 由于 Chrome 频繁更新,而 ChromeDr ...
- [tldr] fish shell添加环境变量到配置文件
fish shell配置文件的编写格式和位置都和bash不同 文件位置 位于~/.config/fish/config.fish 设置PATH fish shell不会去读取~/.bashrc文件中的 ...
- selenium爬虫2
无头浏览器简介 无头浏览器(Headless Browser)是一种没有图形用户界面的浏览器,它在后台运行,不会显示任何窗口或界面.无头浏览器通常用于自动化任务,如网页抓取.自动化测试和性能监控等. ...