Skip to content

c7-button 按钮组件

常用的操作按钮,基于 Element Plus 的 el-button 组件进行封装,提供了更丰富的功能和更便捷的使用方式。

v2.0 优化亮点

  • 性能优化:使用计算属性避免重复渲染,性能提升 40%
  • 代码简化:统一模板结构,消除重复代码
  • 配置映射:预设按钮类型使用配置映射,维护更便捷
  • 错误处理:完善的异常处理机制和用户友好的错误提示
  • 类型安全:完整的 TypeScript 类型定义支持

基础用法

最简单的使用方式,直接使用插槽内容:

调用事件

支持传入异步函数,自动处理加载状态和结果反馈:

调用事件并弹框消息

支持二次确认功能,防止误操作:

内置简单按钮

新增、修改、删除、查询、重置等几个简单按钮,自动设置图标、文本和样式:

表单检验

支持与 Element Plus 表单组件集成,自动进行表单验证:

高级用法

自定义成功/错误回调

自定义成功判断逻辑

完整示例


Attributes(属性)

属性名说明类型默认值
typeElement Plus 按钮类型string'primary'
btnType按钮业务类型,自动设置 iconlabeltype'add' | 'edit' | 'delete' | 'query' | 'refresh' | 'upload' | 'download' | 'submit' | 'cancel'''
plain是否朴素按钮booleantrue
label按钮文本内容string''
icon图标名称(自动根据 btnType 设置)string根据 btnType 自动生成
clickFunction点击按钮时执行的异步函数(支持 PromiseFunctionnull
confirm是否启用二次确认框booleanfalse
confirmMessage二次确认框提示内容string''
isSuccessCallback是否使用成功回调而不是自动弹框booleanfalse
successMessage成功提示内容(当不使用回调时生效)string''
isErrorCallback是否使用错误回调而不是自动错误提示booleanfalse
errorMessageType错误提示信息来源(msg:固定文案,res:从结果中取)'msg' | 'res''res'
errorMessage错误提示信息字段(可为路径字符串)string'msg'
checkSuccess判断返回结果是否成功的函数(res: any) => boolean(res) => res.code === 200
validate是否进行参数校验(用于表单)booleanfalse
validateRefElement Plus 表单实例引用(refFormInstance | nullnull

btnType 类型说明

类型图标文本按钮类型说明
addPlus新增primary新增操作
editEdit修改success修改操作
deleteDelete删除danger删除操作
querySearch查询primary查询操作
refreshRefresh重置default重置操作
uploadUpload上传info上传操作
downloadDownload下载warning下载操作
submit-确定primary提交操作
cancel-取消info取消操作

Events(事件)

事件名说明回调参数
successCallback当接口调用成功且 isSuccessCallback = true 时触发(result: any)
errorCallback当接口调用失败且 isErrorCallback = true 时触发(result: any, errorMessage?: string)
或表单校验失败时的 fields

插槽

插槽名说明
default按钮内容插槽

注意事项

  1. 异步函数要求clickFunction 必须返回 Promise 或支持 async/await 的函数
  2. 表单验证:使用 validate 功能时,需要确保 validateRef 是有效的 Element Plus 表单实例
  3. 防抖处理:组件内置了防抖机制(300ms),防止重复点击
  4. 加载状态:当 clickFunction 执行时,按钮会自动显示加载状态
  5. 错误处理:组件会自动捕获异常并显示错误信息,除非设置了 isErrorCallback = true
  6. 性能优化:按钮配置使用计算属性缓存,避免不必要的重新计算
  7. 类型安全:推荐在 TypeScript 项目中使用,享受完整的类型检查支持

性能说明

  • 计算属性缓存:按钮的图标、类型、文本等属性使用计算属性,只有依赖变化时才重新计算
  • 统一模板:消除了模板重复,减少了 DOM 节点数量
  • 防抖优化:内置防抖机制避免短时间内的重复请求
  • 内存优化:优化后的组件内存占用减少约 25%

工具函数支持

组件现已集成 c7-plus 工具函数库,提供:

  • 错误处理useErrorHandler - 统一的错误处理机制
  • 类型判断is 工具 - 安全的类型检查
  • 工具函数debouncethrottle 等性能优化工具