Swap 切换
精致的切换组件
基本使用
需要使用 v-model
绑定一个值
icon-on
和 icon-off
分别控制切换的不同图标
开启
不同尺寸
size
属性可配置不同的尺寸
开启
不同动画
type
属性可以配置不同的动画类型
开启
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
v-model | 绑定值 | boolean | —— | false |
size | 组件尺寸 | string / number | —— | 40 |
type | 动画类型 | SwapType | sound swap | —— |
icon-on | 打开展示的图标 | FightingIcon | —— | —— |
icon-off | 关闭展示的图标 | FightingIcon | —— | —— |
on-change | 当绑定值发生改变时触发的回调 | SwapChange | —— | —— |
Interface
组件导出以下类型定义:
ts
import type { SwapInstance, SwapProps, SwapType, SwapChange } from 'fighting-design'
SwapType
ts
type SwapType = 'sound' | 'swap'
SwapChange
ts
type SwapChange = (value: boolean, evt: MouseEvent) => void