Vue3新特性 Teleport 传送门功能

灰太狼 2022-09-09 11:46 68阅读 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 条评论，68人围观）

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

相关阅读

相关 Vue3新特性组合式Api

setup - 组件内使用 Composition API 的入口点 > setup 作为组合式 API 的入口点，也就是说，组合式 API 都必须只能在 setup 中

桃扇骨/ 2022年12月15日 03:41/ 0 赞/ 115 阅读

相关 vue3 新特性

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

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

相关 vue3新特性和新用法

下面是关于vue3的一些新特性和新用法的讲解一、新增内置组件：teleport 官文解释teleport：teleport 提供了一种干净的方法，允许我们控制在 DOM

Dear 丶/ 2022年11月15日 11:49/ 0 赞/ 426 阅读

相关 Vue3新特性盘点简介

Vue3支持vue2的大多数特性，你可以像使用vue2一样原封不动的使用vue3 Vue3官方网站 [https://v3.vuejs.org/][https_v3.vuej

痛定思痛。/ 2022年10月29日 06:27/ 0 赞/ 118 阅读

相关 Vue 3.0 新特性

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

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

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

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

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

相关 Vue3 teleport 瞬间移动

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

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

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

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

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

相关 Vue 3.0 的新特性

尤大在 Vue Toronto 的主题演讲中预览了 Vue 3 。通过利用现代浏览器支持的新功能，Vue 3 将成为我们已经了解和喜爱的Vue.js 的改进版本。我们期待的

分手后的思念是犯贱/ 2022年04月14日 02:43/ 0 赞/ 184 阅读

相关 vue3.0 teleport传送标签

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

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