# Switch

常用的操作按钮，含各种类型及状态。

# 引入说明

TIP

import KvSwitch from "jimoui/components/Switch/Switch";

# 代码演示

TIP

可以自定义大小，颜色和搭配组件单元格使用。

//基础用法
<KvSwitch v-model="checked" @tapChange="tapChange"></KvSwitch>
//禁用状态
<KvSwitch
  v-model="checked2"
  :disable="true"
  @tapDisable="disableSwitch"
></KvSwitch>

//自定义大小
<KvSwitch v-model="checked3" @tapDisable="disableSwitch" scale="1.2"></KvSwitch>

//自定义颜色
<KvSwitch v-model="checked4" @tapDisable="disableSwitch" activeColor="#023894"></KvSwitch>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

export default kayakVue({
    data() {
        return {
          title: "Switch",
          checked: true,
          checked2: true,
          checked3: true,
          checked4: true,
          checked5: true,
        };
      },
})

1
2
3
4
5
6
7
8
9
10
11
12

# 属性

配置	用途	取值	使用描述
v-model	按钮开关绑定值	boolean	开关开启为true,关闭为false
:disable	禁用状态	boolean	为true时按钮禁用，此时展示样式固定为关闭。点击时将触发disableHandler回调。之所以它是单向绑定的props，主要考虑到有些场景随着页面状态的变更，开关是否禁用也是动态控制的。
scale	缩放、扩大比例	Number	通过transform方式扩大尺寸。最大仅支持1.3倍，请不要使用过大比例。
noBorder	不显示边框	/	传入该属性时，开关不再显示边框。
activeColor	激活态背景色	String	开关激活态时（v-model为true）的背景色。
inactiveColor	关闭态背景色	String	开关关闭态时（v-model为false）的背景色。
@tapChange	正常状态下的点击触发	Event	$event。按钮禁用时，该事件不会触发。返回值{selected: true/false}
@tapDisable	开关禁用时点击触发	Event	$event 按钮未禁用时，该事件不会触发。
@change	按钮状态变化监听事件	Event	$event:按钮当前状态。不建议监听这个事件，你应当尝试去通过watch监听v-model绑定的状态值。