teleport用法

使用 <teleport></teleport> 标签包裹内容，且给 to 属性绑定瞬移位置的选择器。

详细的 teleport 使用步骤

1、定义内容

<template>
  <teleport to="#modal">
    <div id="center" v-if="isOpen">
      <h2>
        <slot>this is modal</slot>
        <br/>
        <button @click.stop="buttonClick">关闭</button>
      </h2>
    </div>
  </teleport>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  props: {
    isOpen: Boolean,
  },
  emits: {
    "close-modal": null,
  },
  setup(props, context) {
    const buttonClick = () => {
      context.emit("close-modal");
    };
    return {
      buttonClick,
    };
  },
});
</script>

<style scoped>
#center {
    width: 200px;
    height: 200px;
    border: 1px solid black;
    background: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

2、引入组件并使用

<template>
    <button @click.stop="openModal">打开</button>
    <modal :isOpen="modalIsOpen" @close-modal="closeModal">my modal</modal>
</template>

<script lang="ts">
import Modal from "./components/Modal.vue";

export default defineComponent({
    name: "App",
    components: {
        Modal,
    },
    setup() {
        const { x, y } = useMousePosition();
        const modalIsOpen = ref(false);
        const openModal = () => {
          modalIsOpen.value = true;
        };
        const closeModal = () => {
          modalIsOpen.value = false;
        };
        return { modalIsOpen, openModal, closeModal };
    },
});
</script>

3、设定瞬移后的位置
在index.html添加

<div id="modal"></div>