VUE3 之 Teleport - 这个系列的教程通俗易懂，适合自学

最新推荐文章于 2024-07-11 23:19:38 发布

追风人聊Java

最新推荐文章于 2024-07-11 23:19:38 发布

阅读量1k

点赞数

分类专栏：前端文章标签： vue.js javascript

本文链接：https://blog.csdn.net/u011181989/article/details/124651249

版权

前端专栏收录该内容

33 篇文章 3 订阅

订阅专栏

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 的元素下。