Vue 中创建多个相同表单弹窗：复制、修改，轻松实现

在 Vue 组件中，你可以通过复制表单弹窗 A 的代码来创建表单弹窗 B。首先，复制 el-dialog 的模板代码和相关的 data、methods 等属性，并将其粘贴到组件中。然后，根据需要修改表单弹窗 B 的内容和逻辑。\n\n下面是一个示例代码，展示了如何创建表单弹窗 B：\n\nhtml\n<template>\n <div>\n <!-- 表单弹窗 A -->\n <el-dialog v-model="dialogA.visible" :title="dialogA.title" width="70vw" class="min-w-620px" :show-close="false"\n :fullscreen="isFullscreenDialog" :close-on-click-modal="false" :close-on-press-escape="false" @close="closeDialogA">\n <!-- 表单内容 -->\n </el-dialog>\n\n <!-- 表单弹窗 B -->\n <el-dialog v-model="dialogB.visible" :title="dialogB.title" width="70vw" class="min-w-620px" :show-close="false"\n :fullscreen="isFullscreenDialog" :close-on-click-modal="false" :close-on-press-escape="false" @close="closeDialogB">\n <!-- 表单内容 -->\n </el-dialog>\n </div>\n</template>\n\n<script>\n export default {\n data() {\n return {\n dialogA: {\n visible: false,\n title: '表单弹窗 A',\n },\n dialogB: {\n visible: false,\n title: '表单弹窗 B',\n },\n isFullscreenDialog: false,\n };\n },\n methods: {\n closeDialogA() {\n // 关闭表单弹窗 A 的逻辑\n },\n closeDialogB() {\n // 关闭表单弹窗 B 的逻辑\n },\n },\n};\n</script>\n\n\n在上面的示例中，你可以通过复制 el-dialog 的模板代码和相关的 data、methods 等属性来创建表单弹窗 B。然后，根据需要修改表单弹窗 B 的标题、关闭逻辑等。确保给表单弹窗 B 指定一个不同的 data 属性和方法，以避免与表单弹窗 A 产生冲突。\n\n希望能帮到你！