Vue 对话框组件详解：代码解析及多对话框示例

日期: 2026-09-18
标签: 常规

"<el-dialog v-model="dialog.visible" :title="dialog.title" width="70vw" class="min-w-620" :show-close="false"\n :fullscreen="isFullscreenDialog" :close-on-click-modal="false" :close-on-press-escape="false"\n @close="closeDialog">\n <template #header>\n <div class="flex flex-justify-between flex-items-center">\n {{ dialog.title }}\n <div class="p3" style="margin-right: -20px" @click="() => (isFullscreenDialog = !isFullscreenDialog)">\n <svg-icon color="var(--el-color-info)" size="0.7rem"\n :icon-class="isFullscreenDialog ? 'exit-fullscreen' : 'fullscreen'" />\n

\n 以上代码是一个 Vue 组件，表示一个对话框（dialog）的样式和行为。\n\n其中的属性和事件的含义如下：\n- v-model=\"dialog.visible\"：控制对话框的显示或隐藏状态。\n- :title=\"dialog.title\"：设置对话框的标题，标题内容由 dialog.title 变量提供。\n- width=\"70vw\"：设置对话框的宽度为当前视窗宽度的 70%。\n- class=\"min-w-620\"：设置对话框的最小宽度为 620px。\n- :show-close=\"false\"：不显示对话框右上角的关闭按钮。\n- :fullscreen=\"isFullscreenDialog\"：根据 isFullscreenDialog 变量的值决定对话框是否全屏显示。\n- :close-on-click-modal=\"false\"：点击对话框外部区域不会关闭对话框。\n- :close-on-press-escape=\"false\"：按下 Esc 键不会关闭对话框。\n- @close=\"closeDialog\"：当对话框关闭时，调用 closeDialog 方法。\n\n对话框的头部（header）模板中包含了一个标题和一个全屏按钮。点击全屏按钮时，会调用一个方法切换 isFullscreenDialog 变量的值。\n\n如果有两个表单对话框，可以通过添加新的变量来表示第二个对话框的状态和标题，例如：\n\n

javascript\n data() {\n  return {\n    dialog1: {\n      visible: false,\n      title: '对话框1'\n    },\n    dialog2: {\n      visible: false,\n      title: '对话框2'\n    },\n    isFullscreenDialog: false\n  };\n }\n

\n\n然后在组件中使用 dialog1 和 dialog2 变量来控制对话框的显示和隐藏，并通过 title 属性设置对应的标题。

原文地址: https://www.cveoy.top/t/topic/p0y5 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录