vue3项目自定义一个弹窗

在 Vue 3 中，你可以使用 `Teleport` 组件来实现弹窗。以下是一个简单的自定义弹窗的示例：

1. 创建一个 `MyDialog.vue` 组件，它包含你想要显示在弹窗中的内容：

<template>
  <div class="dialog">
    <h2>{{ title }}</h2>
    <p>{{ message }}</p>
    <button @click="$emit('close')">Close</button>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    message: String,
  },
};
</script>

<style scoped>
.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
</style>

2. 在你的父组件中，使用 `Teleport` 组件来渲染弹窗。当需要显示弹窗时，将 `showDialog` 设置为 `true`：

<template>
  <div>
    <button @click="showDialog = true">Show Dialog</button>

    <teleport to="body">
      <my-dialog v-if="showDialog" @close="showDialog = false" title="Title" message="Message" />
    </teleport>
  </div>
</template>

<script>
import MyDialog from './MyDialog.vue';

export default {
  components: {
    MyDialog,
  },
  data() {
    return {
      showDialog: false,
    };
  },
};
</script>

这里我们使用了 `Teleport` 组件将 `MyDialog` 组件渲染到 `body` 元素中，以确保它能够在其他元素上方弹出。

当用户点击弹窗中的 "Close" 按钮时，我们触发 `close` 事件并将 `showDialog` 设置为 `false`，以关闭弹窗。

这只是一个简单的示例，你可以根据自己的需要对弹窗进行样式和功能的定制。