vue3 使用 dialog 弹窗

在 Vue 3 中，你可以使用一些库或者自己编写组件来实现弹窗的功能。以下是一个简单的示例：

1. 首先，安装一个对话框组件库，比如 `vue3-dialog`：

npm install vue3-dialog

2. 在你的 Vue 组件中引入对话框组件：

import { createApp } from 'vue'
import Dialog from 'vue3-dialog'

const app = createApp(...)
app.use(Dialog)

3. 在模板中使用对话框组件：

<template>
  <div>
    <button @click="showDialog">打开对话框</button>
    <dialog v-model="dialogVisible">
      <!-- 对话框内容 -->
    </dialog>
  </div>
</template>

4. 在组件的数据中定义 `dialogVisible` 变量，并在点击按钮时修改它的值来控制对话框的显示和隐藏：

export default {
  data() {
    return {
      dialogVisible: false
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
    }
  }
}

这样，点击按钮时，对话框就会显示出来。你可以在对话框组件中定义更多的属性和方法来自定义弹窗的样式和行为。记得查看组件库的文档以获取更详细的用法说明。