之前介绍了一波混入 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的更多相关文章

  1. vue3基础

    什么是CDN? 内容分发网络--通过相互链接的网络系统,利用最靠近用户的服务器,更快更可靠的发送给用户. vue的cdn引入 method中的函数为什么不能用this? this的主要使用是来获取da ...

  2. vue3 高阶 API 大汇总，强到离谱

    高阶函数是什么呢? 高阶函数英文名叫:Higher Order function ,一个函数可以接收一个或多个函数作为输入,或者输出一个函数,至少满足上述条件之一的函数,叫做高阶函数. 前言 本篇内容 ...

  3. Vue3 中有哪些值得深究的知识点？

    众所周知,前端技术一直更新很快,这不 vue3 也问世这么久了,今天就来给大家分享下vue3中值得注意的知识点.喜欢的话建议收藏,点个关注! 1.createApp vue2 和 vue3 在创建实例 ...

  4. JELLY技术周刊 Vol.23: Vue3 是伟大航路上的 One Piece 么？

    蒲公英 · JELLY技术周刊 Vol.23 这两天大家应该都被 Vue 发布 3.0 版本的信息刷屏了,背负着很多人的期待, Vue 终于将这个船新版本推到台前,接受大众的检验,那么这个代号为 On ...

  5. 简单对比vue2.x与vue3.x响应式及新功能

    简单对比vue2.x与vue3.x响应式 对响应方式来讲:Vue3.x 将使用Proxy ,取代Vue2.x 版本的 Object.defineProperty. 为何要将Object.defineP ...

  6. vue3知识点的自我总结

    1. 我们对ref的错误理解 ref 经常去监听基本数据类型. 同时也可以去监听[数组][对象]都是可以的. ref是深度的监听.并不是大家说的那样不能去监听复杂的数据类型. 只是根据我们推荐ref去 ...

  7. Vue3.0聊天室|vue3+vant3仿微信聊天实例|vue3.x仿微信app界面

    一.项目简介 基于Vue3.0+Vant3.x+Vuex4.x+Vue-router4+V3Popup等技术开发实现的仿微信手机App聊天实例项目Vue3-Chatroom.实现了发送图文表情消息/g ...

  8. 【废弃中】【WIP】JavaScript 数组

    创建: 2018/01/22 更新: 2018/05/20 把此博文加入[javascript]分类, 原来忘记了 废弃: 2019/02/19 重构此篇.原文归入废弃  增加[废弃中]标签与总体任务 ...

  9. Vue+Antd搭配百度地图实现搜索定位等功能

    前言 最近,在做vue项目的时候有做到选择地址功能,而原项目中又引入了百度地图,所以我就打算通过使用百度地图来实现地址搜索功能啦. 本次教程可能过于啰嗦,所以这里先放上预览地址供大家预览--点我预览, ...

  10. 极速上手 VUE 3 —— teleport传送门组件

    一.teleport 介绍 teleport 传送门组件,提供一种简洁的方式,可以指定它里面的内容的父元素.通俗易懂地讲,就是 teleport 中的内容允许我们控制在任意的DOM中,使用简单. 使用 ...

随机推荐

  1. 洛谷B4038 [GESP202409 三级] 平衡序列 题解

    原题传送门 前言 当我以一种十分激动的心情参加了GESP的2024-9的三级考试时. 打开了此题,然后--自以为是的拿着暴力一顿乱写!然后TLE. 直到结束我还是没有想出来! (太菜了!!!) 以一种 ...

  2. Thymeleaf Split

    <th:block th:each="image : ${#strings.listSplit(goods.images, ';')}"> <img th:src ...

  3. Java开发中long类型转换json传递到前端后精度丢失问题

    将文章的id由long类型手动改为String类型(需要修改表结构); 可以使用Jackson进行序列化解决

  4. WPF调用FishSpeech的Demo

    写了一个FishSpeech的教程:使用FishSpeech进行语音合成推理 - 天命小猪 - 博客园 研究了一下如何调用服务器API,朗读文本. 经过调研,决定使用NAudio库播放音频.遇到了一些 ...

  5. SQL SERVER日常运维巡检系列之-性能

    前言 做好日常巡检是数据库管理和维护的重要步骤,而且需要对每次巡检日期.结果进行登记,同时可能需要出一份巡检报告. 本系列旨在解决一些常见的困扰: 不知道巡检哪些东西 不知道怎么样便捷体检 机器太多体 ...

  6. 【检索类型EI、Scopus】第二届智能计算与数据分析国际学术会议（ICDA 2025）

    为探讨数据科学和计算智能领域的关键问题,促进相关交流,由黄河科技学院主办的2025年第二届智能计算与数据分析国际学术会议(ICDA 2025)将于2025年8月22日-24日在中国郑州召开.本届会议拟 ...

  7. 震惊！C++程序真的从main开始吗？99%的程序员都答错了

    嘿,朋友们好啊!我是小康.今天咱们来聊一个看似简单,但实际上99%的C++程序员都答错的问题:C++程序真的是从main函数开始执行的吗? 如果你毫不犹豫地回答"是",那恭喜你,你 ...

  8. HarmonyOS Next 鸿蒙开发-如何使用服务端下发的RSA公钥（字符串）对明文数据进行加密

    如何使用服务端下发的RSA公钥(字符串)对明文数据进行加密 将服务器下发的RSA公钥字符串替换掉pubKeyStr即可实现,具体可参考如下代码: import { buffer, util } fro ...

  9. selenium自动化测试-获取网页截图

    今天学习下使用selenium自动化测试工具获取网页截图. 1,如果是简单获取当前屏幕截图只需要使用方法: driver.get_screenshot_as_file('screenshot.png' ...

  10. Redis 持久化机制简介【Redis 系列之三】

    〇.前言 Redis 持久化主要有两种:RDB(数据快照模式).AOF(追加模式),另外就是这两种模式的混合模式用. 本文将对这三种情况进行详细介绍. 博主 Redis 相关文章都在这里了:https ...