Switch 开关
这不是 switch 游戏机,而是个开关
基本使用
switch
的基本使用,需要使用 v-model
绑定一个值
开启
不同大小
size
属性可以配置不同大小的 switch
开启
禁用状态
disabled
属性可以禁用 switch
开启
加载状态
loading
属性可以加载 switch
开启
方形的
square
属性可以将 switch
设置为方形样式
开启
自定义颜色
close-color
和 active-color
可以自定义开关的颜色
开启
描述文字
close-text
和 active-text
可以自定义开关左右的描述文字
关闭
开启
开启
带有 icon
icon
可以让 switch
上带有 icon
开启
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
modelValue / v-model | 绑定值 | string | —— | false |
size | 组件尺寸 | FightingSize | large middle small mini | middle |
disabled | 是否禁用 | boolean | —— | false |
loading | 是否为加载状态 | boolean | —— | false |
icon | 自定义 icon | FightingIcon | —— | —— |
close-color | 自定义关闭状态背景色 | string | —— | —— |
active-color | 自定义开启状态背景色 | string | —— | —— |
active-text | 自定义右侧的文字描述 | string | —— | —— |
close-text | 自定义左侧的文字描述 | string | —— | —— |
square | 是否为方形开关 | boolean | —— | false |
icon-size | 自定义 icon 大小 | string / number | —— | —— |
on-change | 绑定值发生改变时触发的回调 | HandleChange | —— | —— |
Interface
组件导出以下类型定义:
ts
import type { SwitchInstance, SwitchProps } from 'fighting-design'