4.7 KiB
4.7 KiB
::: anchor :::
::: title 基本介绍 :::
::: describe 开关选择器, 需要表示开关状态/两种状态之间的切换时。 :::
::: title 基础使用 :::
::: demo 使用 lay-switch 标签, 创建开关
:::
::: title 事件回调 :::
::: demo 通过 change 事件, 在操作后完成一些后续处理。
:::
::: title 禁用状态 :::
::: demo 通过 disabled 属性, 禁用开关操作。
:::
::: title 修改描述 :::
::: demo 通过 onswitch-text 与 unswitch-text 属性, 设置不同状态的描述文字。
:::
::: title 图标插槽 :::
::: demo 通过 onswitch-icon 与 unswitch-icon 属性, 设置不同状态的展示图标。
:::
::: title 自定义值 :::
::: demo 通过 onswitch-value 与 unswitch-value 属性, 设置不同状态的值。
:::
::: title 尺寸 :::
::: demo 通过 size 属性, 设置尺寸。
:::
::: title 加载状态 :::
::: demo 通过 loading 与 loading-icon 属性, 开启加载状态与自定义加载图标。
:::
::: title Switch 属性 :::
::: table
| 属性 | 描述 | 可选值 |
|---|---|---|
| name | 原生 name 属性 | -- |
| v-model | 是否启用 | true false |
| disabled | 禁用 | true false |
| onswitch-text | 启用描述 | 启动 |
| unswitch-text | 禁用描述 | 禁用 |
| onswitch-value | 启用值 | true |
| unswitch-value | 禁用值 | false |
| size | 尺寸 | lg md sm xs |
| loading | 加载状态 | true false |
| loading-icon | 加载图标 | -- |
:::
::: title Switch 事件 :::
::: table
| 属性 | 描述 | 参数 |
|---|---|---|
| change | 切换事件 | val : 当前值 |
:::
::: title Switch 插槽 :::
::: table
| 属性 | 描述 | 参数 |
|---|---|---|
| onswitch-icon | 启用图标 | -- |
| unswitch-icon | 禁用图标 | -- |
| ::: |
::: contributor switch :::
::: previousNext switch :::