Swap 切换
切换状态的组件
基本用法
需要使用 v-model 绑定一个值。
大小
size 属性可配置不同的尺寸
自定义值
active-value 和 inactive-value 分别定义选中和未选中的值。
自定义图标
icon-on 和 icon-off 分别控制切换的不同图标。
动画
type 属性可以配置不同的动画类型
API
Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 绑定值 | boolean | false |
| size | 组件尺寸 | string / number | - |
| type | 动画类型 | SwapType | - |
| icon-on | 打开展示的图标 | IconSlotType | - |
| icon-off | 关闭展示的图标 | IconSlotType | - |
Interface
组件导出以下类型定义:
ts
import type { SwapInstance, SwapProps, SwapType } from 'fighting-design'import type { SwapInstance, SwapProps, SwapType } from 'fighting-design'Events
| 事件名称 | 说明 | 类型 |
|---|---|---|
change | 切换后触发 | (evt: MouseEvent, value: boolean) => void |