Vue3中的Teleport(传送门)

2021-11-08 17:31:23 阅读：180 来源： 互联网

标签：DOM Teleport const show 传送门 app 50% Vue3

动画片多啦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>

大家还可以扫描二维码，关注我的微信公众号，蜗牛全栈。

标签：DOM,Teleport,const,show,传送门,app,50%,Vue3
来源： https://www.cnblogs.com/feiying3995/p/15525163.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue3中的Teleport(传送门)