teleport

127 阅读1分钟
<template>
  <button @click="modalOpen = true">打开模态框</button>
  <teleport to="body">
    <div v-if="modalOpen" class="modal">
      <div>
        这是一个弹窗
        <button @click="modalOpen = false">关闭</button>
      </div>
    </div>
  </teleport>
</template>

<script>
import { ref } from 'vue';

export default {
  name: 'ModalButton',
  setup() {
    const modalOpen = ref(false);
    return { modalOpen };
  }
};
</script>

<style scoped></style>