Switch 开关

基础开关

不带描述,最基础的开关。

带描述的开关

开关内部带有文字或图标等描述,含义对应开关当前状态,切换时文字同步切换。视觉上更加醒目,用于需要描述当前开关对应状态及含义,更直观且方便用户理解。

不同状态的开关

提供 normal、loading 和 disabled 3种状态的开关。根据不同场景设置对应状态。

不同大小的开关

提供 大、中(默认)、小 3种开关。

Switch Props

名称类型默认值说明必传
beforeChangeFunction-Switch 切换状态前的回调方法,常用于需要发起异步请求的场景,回调返回值支持布尔和 Promise 类型,返回false或 Promise reject不继续执行change,否则则继续执行。TS 类型:() => boolean | Promise<boolean>N
customValueArray-用于自定义开关的值,[打开时的值,关闭时的值]。默认为 [true, false]。示例:[1, 0]、['open', 'close']。TS 类型:Array<SwitchValue>N
disabledBoolean-是否禁用组件N
labelArray / Slot / Function[]开关内容,[开启时内容,关闭时内容]。示例:['开', '关'] 或 (value) => value ? '开' : '关'。TS 类型:Array<string | TNode> | TNode<{ value: SwitchValue }>通用类型定义N
loadingBooleanfalse是否处于加载中状态N
sizeStringmedium开关尺寸。可选项:small/medium/largeN
valueString / Number / Boolean-开关值。支持语法糖 v-model。TS 类型:SwitchValue type SwitchValue = string | number | boolean详细类型定义N
defaultValueString / Number / Boolean-开关值。非受控属性。TS 类型:SwitchValue type SwitchValue = string | number | boolean详细类型定义N
onChangeFunctionTS 类型:(value: SwitchValue) => void
数据发生变化时触发
N

Switch Events

名称参数描述
change(value: SwitchValue)数据发生变化时触发

何时使用

需要表示开关状态或仅有两种状态之间的切换时;

需要操作后立即生效时。

组件常见用法

与对话框搭配使用,当开启或关闭开关会带来操作风险时,可利用对话框进行二次确认。

推荐/慎用示例

开关文案要准确简洁,只需表达所控制的内容,避免加入逻辑词语或与开关作用相反的内容。

相似组件

组件名何时使用
开关开关操作后,程序立即执行相关操作
多选框多选框一般用在表单里,仅反映当前的选择状态,需要点击额外的提交按钮后生效。
  • small
  • medium
  • large