Files
vant/docs/examples-docs/switch.md
T
2017-02-27 16:54:37 +08:00

50 lines
1.4 KiB
Markdown

## Switch组件
### 基础用法
```html
<div class="page-switch">
<div class="page-switch__wrapper">
<o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch>
<div class="page-switch__text">{{switchStateText}}</div>
</div>
<div class="page-switch__wrapper">
<o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch>
<div class="page-switch__text">ON, DISABLED</div>
</div>
<div class="page-switch__wrapper">
<o2-switch class="some-customized-class" :checked="false" :disabled="true"></o2-switch>
<div class="page-switch__text">OFF, DISABLED</div>
</div>
</div>
<script>
export default {
data() {
return {
switchState: true
};
},
computed: {
switchStateText() {
return this.switchState ? ' ON' : 'OFF';
}
},
methods: {
updateState(newState) {
this.switchState = newState;
}
}
};
</script>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| checked | 开关状态 | boolean | false | true, false |
| loading | loading状态 | boolean | false | true, false |
| disabled | 禁用状态 | boolean | false | true, false |
| onChange | 回调 | function | function(){} | - |