# Switch
开关
案例
import { defineComponent } from "vue";
import { Switch } from "sl-vue2-template";
export default defineComponent({
data() {
return {
checked: false,
};
},
methods: {
onSwitch() {
this.checked = !this.checked;
},
},
render() {
return (
<div>
<Switch checked={this.checked} handlerChange={this.onSwitch}>
Switch
</Switch>
<Switch
size="small"
checked={this.checked}
handlerChange={this.onSwitch}
color="blue"
>
Switch
</Switch>
<Switch
checked={this.checked}
handlerChange={this.onSwitch}
color="blue"
disabled
animation={false}
>
Switch
</Switch>
</div>
);
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
# 属性
| 成员 | 说明 | 类型 | 必须 | 默认值 | 版本 |
|---|---|---|---|---|---|
| checked | 开关 | Boolean | 是 | false | -- |
| size | 尺寸 | 'large' | 'small' | 否 | -- | -- |
| color | 背景颜色/边框颜色(当设置了 plain 时有效) | 支持的颜色 | 否 | 'primary-color' | -- |
| disabled | 禁用 | Boolean | 否 | false | -- |
| animation | 动画效果 | Boolean | 否 | true | -- |
| className | 自定义 class 名 | String | 否 | -- | -- |
# 事件
| 事件名称 | 说明 | 回调参数 | 必须 | 版本 |
|---|---|---|---|---|
| handlerChange | value 变化的回调 | (arg:boolean) => void | 否 | -- |