FS-UI v0.1.33

Switch 切换

使用指南

import { Switch } from 'fs-ui'

export default {
  components: {
    fsSwitch: Switch
  }
}
1
2
3
4
5
6
7

代码演示

  • 基础
  <fs-switch v-model="val1"></fs-switch>
1

  • 文字

  • 尺寸

<fs-switch v-model="val2" size="small"></fs-switch>
<fs-switch v-model="val2"></fs-switch>
<fs-switch v-model="val2" size="large"></fs-switch>
1
2
3
  • 禁用
<fs-switch disabled></fs-switch>
1
  • 加载
<fs-switch v-model="val3" loading></fs-switch>
1
  • 颜色
<fs-switch v-model="val4" activeColor="#039183" inactiveColor="#321333"></fs-switch>
1

属性

参数 说明 类型 默认值
v-model 绑定的值 String, Number, Boolean false
active-color 打开时的背景色 String -
inactive-color 关闭时的背景色 String -
disabled disabled Boolean false
size 按钮大小，可选值为 small normal large String normal
activeText 打开时的文字 String -
inactiveText 关闭时的文字 String -
activeStyle 打开时的样式 Object -
inactiveStyle 打开时的样式 Object -

事件

event 说明 参数
input input 事件 返回当前开关的值 activeValue
on-change change 事件 返回当前开关的值 activeValue

← Cell 单元 →