利用Vue3的Teleport实现模态对话框功能

vue create my-vue3-project
cd my-vue3-project

<template>
  <Teleport to="body">
    <div v-if="isVisible" class="modal-overlay" @click.self="close">
      <div class="modal-content">
        <h3>{{ title }}</h3>
        <slot></slot>
        <button @click="close">关闭</button>
      </div>
    </div>
  </Teleport>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    isVisible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    close() {
      this.$emit('update:isVisible', false);
    }
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
</style>

<template>
  <div id="app">
    <h1>Vue 3 Teleport 示例</h1>
    <button @click="showModal">打开模态框</button>
    <Modal :title="'示例模态框'" v-model:isVisible="isModalVisible">
      <p>这是一个使用 Vue 3 Teleport 实现的模态对话框!</p>
    </Modal>
  </div>
</template>

<script>
import Modal from './components/Modal.vue'

export default {
  components: {
    Modal
  },
  data() {
    return {
      isModalVisible: false
    };
  },
  methods: {
    showModal() {
      this.isModalVisible = true;
    }
  }
}
</script>

<style>
#app {
  text-align: center;
}
</style>

<template>
  <Teleport to="body">
    <div v-if="isVisible" class="modal-overlay" @click.self="close">
      <div class="modal-content">
        <h3>{{ title }}</h3>
        <slot></slot>
        <button @click="confirm">确认</button>
        <button @click="close">取消</button>
      </div>
    </div>
  </Teleport>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    },
    isVisible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    confirm() {
      this.$emit('confirm');
      this.close();
    },
    close() {
      this.$emit('update:isVisible', false);
    }
  }
}
</script>