UseElButton - 按钮

组件介绍

UseElButton 是基于 Element Plus 的 ElButton 二次封装的按钮组件，专注于为按钮提供开箱即用的防抖、二次确认能力，同时标准化扩展配置项管理，完整兼容原生 ElButton 核心属性，可直接替换原生 ElButton 使用，大幅降低按钮防抖、二次确认场景的重复开发成本。

核心能力

开箱即用的防抖能力

内置防抖配置项（debounce），支持自定义防抖延迟时间、是否立即执行防抖逻辑，无需手动封装防抖函数，未配置时默认使用 500ms 延迟且立即执行的防抖策略，将 delay 设置为 0 即可关闭防抖，兼顾不同场景下的点击响应需求。

标准化的二次确认能力

支持配置二次确认弹框（confirm），显式设置 confirm.data 即可开启二次确认，支持 String/Number/Object/Array 类型数据传递，内置数据格式转换能力（数组转逗号分隔字符串、对象 / 数组提取指定主键、主键自动追加 s 后缀），弹框标题、内容、类型可自定义，满足删除 / 提交等高危操作的确认需求。

灵活的配置优先级管理

所有扩展配置遵循「组件局部配置 > 全局默认配置 > 内置默认值」优先级规则，组件传入的 extConfig 优先覆盖 defaultExtConfig 中的默认配置（如二次确认类型默认 danger、弹框标题默认 “删除提示”），未配置时自动兜底，兼顾全局统一与局部灵活调整。

完善的数据处理能力

针对二次确认的不同数据类型做标准化处理：基础类型（String/Number）直接透传、对象类型提取指定主键、数组类型批量提取主键并支持逗号拼接，同时内置有效数据校验，未选择有效数据时自动提示，避免空数据提交问题。

原生按钮完全兼容

基于 ElButton 封装，完整保留原生 type 等核心属性，按钮文本（btnText）作为必传属性标准化管理，插槽完全透传，可直接替换原生 ElButton 使用，无迁移成本，同时补充原生按钮缺失的防抖、二次确认能力。

样式兼容与问题修复

内置样式修复逻辑：解决 ElMessageBox.confirm 在 el-drawer 等组件内使用时被覆盖的问题（提升弹框 z-index），修复某些场景下 el-button 全局样式污染导致的链接按钮聚焦 / 失焦样式异常问题，保证组件在不同布局场景下的样式一致性。

扩展配置标准化

通过 ExtConfig 接口标准化防抖、二次确认等扩展配置项，提供 defaultExtConfig 全局默认扩展配置，业务侧可灵活覆盖配置项（如自定义二次确认弹框内容、防抖延迟），保证项目内按钮扩展配置规范统一。

安全的生命周期管理

组件挂载时自动绑定按钮失焦事件，解决某些场景下 el-button 一直保持 “聚焦高亮 / 选中状态” 的问题；卸载时自动移除事件监听、取消防抖函数执行，避免内存泄漏，保证组件在动态渲染场景下的稳定性。

使用

UseElButton

Props

import type { PropType } from 'vue'
import type { ExtConfig } from './types'

/**
 * 组件props
 */
export default {
  /**
   * 按钮文本 未传时可使用自定义slot
   */
  btnText: {
    type: [String, Number, Boolean],
    default: ''
  },
  /**
   * 按钮类型 同ElButton类型，默认为primary
   */
  type: {
    type: String,
    default: 'primary',
    validator: (val: string) =>
      [
        'default',
        'primary',
        'success',
        'warning',
        'danger',
        'info',
        ''
      ].includes(val)
  },
  /**
   * 扩展配置 如【防抖/二次确认】等
   */
  extConfig: {
    type: Object as PropType<ExtConfig>,
    default: () => ({})
  }
}

Types

import type { ExtractPropTypes } from 'vue'
import componentProps from './props'

/**
 * props类型
 */
export type Props = ExtractPropTypes<typeof componentProps>

/**
 * emits类型
 */
export type Emits = {
  /** 点击事件 默认自带防抖 */
  (e: 'click', value?: string | number | Record<string, unknown>): void
}

/**
 * extConfig接口
 */
export interface ExtConfig {
  /** 防抖配置项 无需防抖将delay设置为0即可 */
  debounce?: {
    /** 防抖时间 */
    delay?: number
    /** 是否立即开启防抖 */
    immediate?: boolean
  }
  /** 二次确认配置项 */
  confirm?: {
    /** 二次确认数据 显式设置则开启二次确认，可为String、Number、Object、Array，无需传递数据则显式设置为null */
    data?: string | number | Record<string, unknown> | unknown[] | null
    /** 二次确认类型 同ElButton类型 */
    type?:
      | 'default'
      | 'primary'
      | 'success'
      | 'warning'
      | 'danger'
      | 'info'
      | ''
    /** 二次确认数据主键key 对象或对象数组需要 */
    dataKey?: string
    /** 是否将数组转换为以逗号分隔的字符串 如：[1,2] => '1,2' */
    toJoin?: boolean
    /** 是否追加s到dataKey后面 如：id => ids */
    appendS?: boolean
    /** 二次确认弹框标题 */
    title?: string
    /** 二次确认弹框内容 */
    content?: string
  }
}

DefaultExtConfig

import type { ExtConfig } from './types'

/**
 * 默认扩展配置
 */
export default {
  debounce: { delay: 500, immediate: true },
  confirm: {
    type: 'danger',
    dataKey: 'id',
    toJoin: true,
    appendS: false,
    title: '删除提示',
    content: '确定将选择数据删除？'
  }
} satisfies ExtConfig

UseElButton - 按钮 ​

组件介绍 ​

核心能力 ​

使用 ​

Props ​

Types ​

DefaultExtConfig ​

UseElButton - 按钮

组件介绍

核心能力

使用

Props

Types

DefaultExtConfig