UseElSwitch - 开关

组件介绍

UseElSwitch 是基于 Element Plus 的 ElSwitch 二次封装的开关组件，专注于为中后台开关场景提供开箱即用的标准化默认配置，统一状态值规范、文案交互与样式表现，完整兼容原生 ElSwitch 核心属性与事件，可直接替换原生 ElSwitch 使用，大幅降低状态绑定、文案配置等重复开发成本，保证项目内开关组件的交互一致性。

核心能力

标准化状态值默认配置

内置适配后端接口常用的0/1状态码规范：开关开启（on）状态默认值为 1，关闭（off）状态默认值为 0，覆盖原生 ElSwitch 默认的 true/false 布尔值规则，无需每次手动绑定 active-value/inactive-value，直接对接大部分接口状态字段，减少重复配置代码。

统一默认文案与交互样式

默认开启文字内嵌模式（inline-prompt 默认为 true），开关状态文案默认配置为「启用/禁用」，符合中后台系统通用的状态切换交互习惯，无需额外配置即可满足大部分启用/禁用类业务场景需求，开箱即用。

多类型状态值支持

开关状态值支持 Number、String、Boolean 三种基础类型，可灵活适配不同后端接口的状态字段类型（如0/1、"0"/"1"、true/false），无需额外做类型转换，覆盖各类业务场景的状态值需求。

灵活的配置优先级管理

所有配置遵循「组件局部配置 > 全局默认配置 > 内置默认值」的统一优先级规则，组件传入的属性可灵活覆盖默认配置（如自定义开关文案、状态值、是否内嵌文字），未配置时自动使用内置默认值兜底，兼顾项目全局规范统一与业务场景个性化调整。

原生开关完全兼容

基于 ElSwitch 原生组件封装，完整保留 v-model 双向绑定、change 事件监听、插槽自定义、禁用状态、加载状态等所有原生能力，属性与事件完全透传，可直接替换原生 ElSwitch 使用，无任何迁移成本。

轻量无侵入封装

组件封装逻辑轻量，无额外第三方依赖，仅对默认属性做标准化处理，未侵入原生 ElSwitch 的核心运行逻辑，组件运行性能与原生开关完全一致，无额外性能开销，适合在列表、表单等高频渲染场景使用。

完善的TypeScript类型支持

所有 Props 属性均提供完整的 TypeScript 类型定义与注释，支持 IDE 类型提示与类型校验，避免属性类型错误，提升开发体验与代码健壮性。

统一的组件库规范对齐

与 UseElButton 等其他组件遵循相同的封装规范与配置优先级规则，保持组件库API设计一致性，降低业务开发的学习成本，统一项目内组件的使用方式。

使用

UseElSwitch

Props

/**
 * 组件props
 */
export default {
  /**
   * switch 状态为 on 时的值
   */
  activeValue: {
    type: [Number, String, Boolean],
    default: 1
  },
  /**
   * switch的状态为 off 时的值
   */
  inactiveValue: {
    type: [Number, String, Boolean],
    default: 0
  },
  /**
   * switch 打开时的文字描述
   */
  activeText: {
    type: String,
    default: '启用'
  },
  /**
   * switch 的状态为 off 时的文字描述
   */
  inactiveText: {
    type: String,
    default: '禁用'
  },
  /**
   * 无论图标或文本是否显示在点内，只会呈现文本的第一个字符
   */
  inlinePrompt: {
    type: Boolean,
    default: true
  }
}

UseElSwitch - 开关 ​

组件介绍 ​

核心能力 ​

使用 ​

Props ​

UseElSwitch - 开关

组件介绍

核心能力

使用

Props