DaLuoComponents

Appearance

FinActionButton 操作按钮 ​

组件与命名规范：组件名主推 FActionButton，别名导出 FinActionButton。按钮组由 action-button 子包入口导出为 FinActionButtonGroup，当前 @axewo/fin-ui 聚合入口未提供 FActionButtonGroup 别名。

操作按钮组件 FActionButton/FinActionButton 及组组件 FinActionButtonGroup 用于统一管理系统中的基础按钮、表格行操作按钮、顶部工具栏动作按钮。内置二次确认框、异步前置校验钩子、动态显隐控制以及智能 Tooltip 提示等高频业务功能。

基础用法 ​

支持配置按钮类型、文本、图标、二次确认对话框、异步前置操作 onBeforeOperation 以及智能提示 tooltip。

loading

核心特性 ​

1. 二次确认提示 (confirm) ​

业务中经常遇到“危险删除”、“敏感状态变更”等场景。无需手动书写 ElMessageBox.confirm 代码，只需在配置中指定 confirm 对象：

ts
const deleteBtn: ActionButtonConfig = {
  key: 'delete',
  label: '删除',
  type: 'danger',
  confirm: {
    title: '确认删除？',
    message: '删除后无法恢复，确定要继续吗？',
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  },
}

2. 操作前置异步钩子 (onBeforeOperation) ​

在执行点击事件前，如果需要先校验权限、发送预检请求或收集补充判断，可使用 onBeforeOperation 异步函数。函数返回 false 或抛出异常时，将自动阻断后续 onClick 和 @click 事件。

ts
const submitBtn: ActionButtonConfig = {
  key: 'submit',
  label: '提交审核',
  onBeforeOperation: async (row) => {
    // 异步校验
    const checkValid = await validateRowStatus(row)
    if (!checkValid) {
      ElMessage.warning('当前单据状态不满足提交条件')
      return false // 阻止点击执行
    }
    return true
  },
}

3. 动态计算显隐与禁用 (visible / disabled) ​

visible 与 disabled 既支持传入 boolean 静态值，也支持传入接收 (row, params) 参数的计算回调函数：

ts
const auditBtn: ActionButtonConfig = {
  key: 'audit',
  label: '审核',
  // 仅在状态为待审核时显示
  visible: (row) => row?.status === 'pending',
  // 仅当用户拥有审核权限时启用
  disabled: (row, params) => !params?.hasPermission,
}

4. 智能 Tooltip 包裹 (tooltip) ​

在按钮被禁用时，Element Plus 的 Tooltip 提示默认可能因原生 button 节点事件拦截而失效。FinActionButton 内部自动增强了 span 包裹逻辑，确保禁用按钮也能正常浮现 Tooltip。

API 说明 ​

ActionButtonConfig 配置项 ​

属性名类型默认值说明
keystring必填按钮唯一标识
labelstring''按钮显示文本
type'primary' | 'success' | 'warning' | 'danger' | 'info' | '''default'按钮类型类型样式
size'large' | 'default' | 'small''default'按钮尺寸
disabledboolean | ((row?: any, params?: any) => boolean)false是否禁用按钮（支持函数表达式）
visibleboolean | ((row?: any, params?: any) => boolean)true是否显示按钮（支持函数表达式）
confirmConfirmConfig | ((row?: any, params?: any) => ConfirmConfig)-二次确认对话框配置
onBeforeOperation(row?: any, params?: any) => Promise<boolean | void> | boolean | void-点击前置钩子，返回 false 将停止后续点击
onClick(row?: any, params?: any) => void | Promise<void>-按钮点击触发函数
tooltipstring | boolean | ActionButtonTooltipConfig | ((row?: any, params?: any) => ...)-Tooltip 提示文本或属性配置
attrsPartial<ButtonProps>-原生透传给 ElButton 的其他属性

ConfirmConfig 配置项 ​

属性名类型默认值说明
titlestring'提示'弹窗标题
messagestring必填弹窗正文提示文本
confirmButtonTextstring'确定'确认按钮文字
cancelButtonTextstring'取消'取消按钮文字
type'warning' | 'info' | 'success' | 'error''warning'弹窗图标消息类型

Emits 事件 ​

事件名回调参数说明
click(row: any, params: any)按钮有效点击后触发