Vue3中的Teleport(传送门)

最新推荐文章于 2024-06-05 20:12:35 发布

飞鹰3995

最新推荐文章于 2024-06-05 20:12:35 发布

阅读量286

点赞数

分类专栏： Vue3.0 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/q709971076/article/details/121085421

版权

Vue3.0 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

动画片多啦A梦相信大家很多都看过，而且近几年又出现了相关的电影，作为小编一个男生来说，一直是对里面的静香念念不忘，有点跑偏了哈，今天小编介绍的Teleport就和多啦A梦的任意门一样，可以穿梭到任何的DOM中的任何地方。

模态框一直是实际开发中用到比较多的功能之一，在没有各种各样的组件之前，我们需要通过css中的定位对元素进行修饰，有了Teleport，我们就可以这样实现一个简单的模态的组件

<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;  }</style><script>  const app = Vue.createApp({      data(){          return {              show:false          }      },      methods:{          handleBtnClick(){              this.show = !this.show          }      },      template: `<div class="area">              <button @click="handleBtnClick">按钮</button>              <teleport to="body">                  <div class="mask" v-show="show"></div>              </teleport>              </div>`  })
  const vm = app.mount("#root")</script>

上面的例子是将元素传递到body中，如果要将元素传递到指定的DOM节点，我们要怎么处理呢？

我们通过Teleport中的to属性，可以将代码写成这样

<body>  <div id="root"></div>  <div id="hello"></div></body><script>  const app = Vue.createApp({        data(){          return {              show:false          }      },      methods:{          handleBtnClick(){              this.show = !this.show          }      },      template: `<div class="area">        <button @click="handleBtnClick">按钮</button>         // 类似css选择器，根据DOM元素不同，通过to属性设置传送的位置        <teleport to="#hello">          <div class="mask" v-show="show"></div>        </teleport>      </div>`  })
  const vm = app.mount("#root")</script>