Vue3：Teleport-传送组件

Teleport-传送组件

Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建 UI。我们可以将它们嵌套在另一个内部，以构建一个组成应用程序 UI 的树。

然而，有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置

模态弹框

to属性：放到指定位置

<template>
  <div class="reson">
    <button @click="showModel">点击弹出模态框</button>

    <teleport to="body">
      <div class="mask" v-show="isShow">
        <div class="box">
          <h1>我是模态框</h1>
          <button @click="closeModel">点击关闭模态框</button>
        </div>
      </div>
    </teleport>

  </div>
</template>

<script>
import { ref } from "vue"
export default {
  name: 'Reson',

  setup() {
    let isShow = ref(false)
    //显示
    let showModel = function () {
      isShow.value = true
    }
    //隐藏
    let closeModel = function () {
      isShow.value = false
    }
    return { isShow, showModel, closeModel }
  }
};
</script>

<style lang="scss" scoped>
.reson {
  background-color: pink;
}
.mask {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.box {
  width: 300px;
  height: 300px;
  background-color: aqua;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>