Vue中的teleport传送门功能

1.利用teleport制作mask蒙板

<style>
      .area {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background: green;
      }
      .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #000;
        opacity: 0.5;
      }
    </style>
   const app = Vue.createApp({
      data() {
        return {
          show: false,
        };
      },
      methods: {
        handleBtnClick() {
          this.show = !this.show;
        },
      },
      template: `
            <div class="area">
               <button @click="handleBtnClick">按钮</button>
                // 通过teleport指定要传送的地方 这样可以把mask这个div放在body下面
                // 这样就可以形成一个覆盖整个页面的蒙版了
                // 也可以指定#id选择器来指定传送的位置
                // 或者.类选择器也可以
               <teleport to="body">
                <div class="mask" v-show="show"></div>
                </teleport>

            </div>
        `,
    });