teleport

<template>

<div class="warp">

  // body是指将teleport组件挂载到body上,to可以写元素名/类名/ID名

  <teleport to='body'>

    <TeleportComponent />

  </teleport>

</div>

</template>

<script setup lang='ts'>

import TeleportComponent from '../study/teleport/component.vue'

</script>

<style scoped lang='scss'>

.warp {

  height: 50vh;

  // TeleportComponent的position是abuolute,导致TeleportComponent只能相对于warp,teleport可以让它不受限制

  position: relative;

  background: rgba($color: #000000, $alpha: 0.1);

}

</style>

 

<template>

<div class="teleport">Teleport Component</div>

</template>

<script setup lang='ts'>

import { ref, reactive } from 'vue'

</script>

<style scoped lang='scss'>

  .teleport {

    color: red;

    // TeleportComponent的父级组件position是relative,导致TeleportComponent只能相对于warp,teleport可以让它不受限制

    position: absolute; // 因为teleport移动了后,此时写position不受warp的限制

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

  }

</style>