【Vue3从零开始-第四章】5-3 传送门Teleport

AI画手小王

于 2022-05-12 09:56:26 发布

阅读量743

点赞数 1

文章标签：前端 javascript css

本文链接：https://blog.csdn.net/qq_53225741/article/details/124724954

版权

本文通过一个常见的弹出层与蒙版的例子，详细介绍了Vue3中的传送门(Teleport)功能。在解释为何需要传送门的背景后，展示了如何使用Teleport解决蒙版遮罩全屏的问题。通过将蒙版元素通过Teleport移动到<body>标签下，实现了全屏遮罩效果。此外，还探讨了Teleport的其他用法，如放置在不同层级的标签中。

摘要由CSDN通过智能技术生成

前菜

为了很好的讲解传送门的意思，我们需要用一个常用的例子去学，那就是弹出层会用到的透明蒙版。

<script>
  const app = Vue.createApp({
    data(){
      return {
        show: false
      }
    },
    methods: {
      handleClick(){
        this.show = !this.show
      }
    },
    template: `
      <div class="box">
        <button @click="handleClick">点击</button>
        <div class="mask" v-if="show" @click="handleClick"></div>
      </div>
    `
  });

  const vm = app.mount('#root');

</script>

定义一个模板，里面有一个盒子，盒子里面包裹了一个按钮和一个蒙版
点击按钮时蒙版显示，点击蒙版时蒙版消失

<style>
    .box{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 200px;
      height: 200px;
      background-color: #f4ef4e;