Vue3新特性 Teleport 传送门功能

灰太狼 2022-09-09 11:46 129阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Vue3新特性 Teleport 传送门功能</title>
      <style>
        .area {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 200px;
          height: 300px;
          background: green;
        }
        .mask {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background: #000;
          opacity: 0.5;
          color: #fff;
          font-size: 100px;
        }
      </style>
      <script src="https://unpkg.com/vue@next"></script>
    </head>
    <body>
      <div id="root"></div>
      <div id="hello"></div>
    </body>
    <script>
      // teleport 传送门
      const app = Vue.createApp({
        data() {
          return {
            show: false,
            message: 'hello'
          }
        },
        methods: {
          handleBtnClick() {
            this.show = !this.show;
          }
        },
        template: `
          <div class="area">
            <button @click="handleBtnClick">按钮</button>
            <teleport to="#hello">
              <div class="mask" v-show="show">{
       {message}}</div>
            </teleport>
          </div>
        `
      });
    
      const vm = app.mount('#root');
    </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，129人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue3新特性多方面总结vue3.0新特性

Compostion api 代替了 Option api ，Compostion API 中时根据逻辑相关组织代码的，提高可读性和可维护性性能比Vue2.x快1.2~2...

太过爱你忘了你带给我的痛/ 2024年04月24日 21:01/ 0 赞/ 86 阅读

相关 Vue3新特性

-------------------- 文章目录一新特性之组合API 1.1 ref&reactive 1.2 methods

梦里梦外;/ 2024年03月30日 15:46/ 0 赞/ 101 阅读

相关 Vue3新特性解析：响应式API、Composition API与Teleport

Vue3是Vue.js框架的最新版本，带来了一系列令人期待的新特性，包括响应式API、Composition API和Teleport。本文将深入探讨这些新特性的原理、性能、示

傷城~/ 2023年10月12日 11:33/ 0 赞/ 10 阅读

相关文章传送门

目录一、Vue 1、基础 2、数据交互 3、组件 4、实战二、Git 三、JavaScript 四、浏览器五、uniapp 六、其他 -------

- 日理万妓/ 2023年07月11日 12:55/ 0 赞/ 22 阅读

相关 vue3 新特性

破解 vue3.x 新特性视频地址 https://www.bilibili.com/video/av69262619/ 0. 基础要求 1. 了解常见

我不是女神ヾ/ 2022年11月29日 05:47/ 0 赞/ 210 阅读

相关 Vue 3.0 新特性

Vue 3.0 新特性 [Vue 3.0 新特性及使用方法 - 简书][Vue 3.0 _ -] 介绍 2020年9月19日凌晨，尤雨溪大大正式发布了 Vue.js

绝地灬酷狼/ 2022年09月17日 06:17/ 0 赞/ 242 阅读

相关 Vue3新特性 Teleport 传送门功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

灰太狼/ 2022年09月09日 11:46/ 0 赞/ 130 阅读

相关 Vue3 teleport 瞬间移动

`Teleport` 是一种能够将我们的模板移动到 `DOM` 中 `Vue app` 之外的其他位置的技术，就有点像哆啦A梦的“任意门” 场景：像 `modals`,`to

Bertha 。/ 2022年09月08日 00:16/ 0 赞/ 159 阅读

相关 unity3d shader ar任意门（传送门）

通道遮罩 ColorMask ColorMask可以让我们制定渲染结果的输出通道，而不是通常情况下的RGBA这4个通道全部写入。可选参数是 RGBA 的任意组合以及 0，

ゞ浴缸里的玫瑰/ 2022年05月29日 02:07/ 0 赞/ 314 阅读

相关 vue3.0 teleport传送标签

作用: 能将teleport标签内的元素,添加到页面任意元素已有内容后使用: <teleport to='css选择

蔚落/ 2021年07月24日 14:05/ 0 赞/ 344 阅读