FinDialog 对话框

组件与命名规范：组件名主推 FDialog，别名导出 FinDialog。

对 Element Plus Dialog 组件的封装，提供更符合财务场景的对话框交互体验。

特性

• 📦 开箱即用的确认/取消按钮
• 🔔 内置底部提示区域支持
• 🎨 统一的样式规范
• ⚡ 支持确认按钮加载状态
• 🎯 更安全的默认配置（禁用点击遮罩关闭）

基础用法

最简单的对话框用法。

loading

自定义按钮

自定义按钮文字和显示/隐藏。

loading

底部提示

在对话框底部显示提示信息，支持 HTML。

loading

确认加载状态

提交表单时显示加载状态，防止重复提交。

loading

自定义内容

通过插槽自定义对话框各个部分的内容。

loading

表单对话框

结合 FinForm 使用的完整表单对话框示例。

loading

API

Props

属性名	说明	类型	默认值
model-value / v-model	是否显示对话框	boolean	false
title	标题	string	''
width	宽度	string | number	'600px'
show-close	是否显示关闭按钮	boolean	true
close-on-click-modal	是否可以通过点击遮罩关闭	boolean	false
close-on-press-escape	是否可以通过按下 ESC 关闭	boolean	true
notice	底部提示信息（支持 HTML）	string	''
show-cancel-button	是否显示取消按钮	boolean	true
cancel-button-text	取消按钮文字	string	'取消'
confirm-button-text	确认按钮文字	string	'确定'
confirm-loading	确认按钮加载状态	boolean	false

Events

事件名	说明	参数
update:model-value	更新 v-model 值	(value: boolean)
close	对话框关闭时触发	()
cancel	点击取消按钮时触发	()
confirm	点击确认按钮时触发	()

Slots

插槽名	说明	作用域
default	对话框内容	-
header	自定义标题区域	-
footer	自定义底部按钮区域	-
notice	自定义底部提示内容	-

类型定义

interface FinDialogProps {
  modelValue: boolean
  title?: string
  width?: string | number
  showClose?: boolean
  closeOnClickModal?: boolean
  closeOnPressEscape?: boolean
  notice?: string
  showCancelButton?: boolean
  cancelButtonText?: string
  confirmButtonText?: string
  confirmLoading?: boolean
}

interface FinDialogEmits {
  'update:modelValue': [value: boolean]
  close: []
  cancel: []
  confirm: []
}

设计说明

默认配置的考虑

1. 禁用点击遮罩关闭（close-on-click-modal: false）

   • 财务系统中的对话框通常包含重要操作
   • 防止用户误点击遮罩导致数据丢失
   • 需要明确点击"取消"或"确定"按钮

2. 底部提示区域

   • 用于显示操作说明、注意事项或警告信息
   • 支持 HTML，可以高亮关键信息
   • 与内容区域视觉分离，不干扰主要内容

3. 确认加载状态

   • 防止用户重复提交
   • 提供明确的操作反馈
   • 异步操作完成后应由外部控制关闭

最佳实践

1. 标题规范

   • 使用动词+名词：如"新建凭证"、"编辑科目"
   • 保持简洁，不超过 10 个字

2. 按钮文字

   • 默认"确定/取消"适用于大多数场景
   • 特殊操作可自定义，如"删除/保留"、"提交/暂存"

3. 表单对话框

   • 始终使用确认加载状态
   • 表单验证失败时不关闭对话框
   • 提交成功后再关闭

4. 底部提示

   • 用于重要提示，不要放置次要信息
   • 使用 <strong> 标签高亮关键内容
   • 避免过长的提示文字

注意事项

• notice 属性支持 HTML，使用时注意 XSS 安全
• 确认按钮点击后不会自动关闭对话框，需要在 confirm 事件中手动控制
• 取消按钮点击后会自动关闭对话框并触发 cancel 事件
• 继承了 Element Plus Dialog 的所有属性，可通过 v-bind="$attrs" 传递