# Switch 开关
表示两种相互对立的状态间的切换,多用于触发「开/关」。
# 代码演示
国际化(多语言)
1、超出一行显示省略号 2、以字母省略 3、鼠标悬浮:考虑到性能问题,悬浮可以用 原生 title 支持
Vue.use(WinDesign, { i18nOverflow: true })
1
# API
# Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| active-icon-class | switch 打开时所显示图标的类名,设置此项会忽略 active-text | String | — | — | |
| active-text | switch 打开时的文字描述 | String | — | — | |
| active-value | switch 打开时的值 | Boolean | String | Number | — | true | |
| active-color | switch 打开时的背景色 | String | — | '#2d5afa' | v2.0.0 |
| before-change | 当开关状态变化之前触发的回调函数 | Function | — | — | v1.7.2 |
| disabled | 是否禁用 | Boolean | — | false | |
| inactive-icon-class | switch 关闭时所显示图标的类名,设置此项会忽略 inactive-text | String | — | — | |
| inactive-text | switch 关闭时的文字描述 | String | — | — | |
| inactive-value | switch 关闭时的值 | Boolean | String | Number | — | false | |
| inactive-color | switch 关闭时的背景色 | String | — | '#c9c9c9' | v2.0.0 |
| disabled-color | switch 禁用时的背景色(在设置 disabled 时有效) | String | — | v2.1.0 | |
| inner-text | 是否内置文字描述 | Boolean | — | false | v2.0.0 |
| name | switch 对应的 name 属性 | String | — | — | |
| square | 是否为方形样式 | Boolean | — | false | v2.0.0 |
| value / v-model | 绑定值 | Boolean | String | Number | — | — | |
| validate-event | 输入时是否触发表单的校验 | Boolean | — | — | v2.0.0 |
| width | switch 的宽度(像素) | Number | — | 48 | v2.0.0 |
| size | switch 的尺寸 | String | 'medium' | 'small' | medium | v2.1.1 |
| correct-position | 纠正某些样式影响导致内部文字位置错误 | Boolean | - | false | v2.4.45 |
# Events
| 事件名称 | 说明 | 回调参数 | Version |
|---|---|---|---|
| change | switch 状态发生变化时的回调函数 | 新状态的值 |
# Methods
| 方法名 | 说明 | 参数 | Version |
|---|---|---|---|
| focus | 使 Switch 获取焦点 | — |