Vue传送门<teleport to="body"></teleport>```js``` // <teleport><

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
      .area {
        position: absolute;
        width: 400px;
        height: 400px;
        background-color: olivedrab;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
      .mask {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          show: false,
        };
      },
      methods: {
        handleClick() {
          this.show = !this.show;
        },
      },
      //   模板,使用了自带指令  v-on v-show
      //   传送门要做的是把div传送到body下面
      // <teleport></teleport to="body">
      template: `
    <div class="area">
        <button @click="handleClick">点击</button>
<teleport to="body">
    <div v-show="show" class="mask"></div>
    
    </teleport>
        </div>`,
    });
    app.mount("#root");
  </script>
</html>