2016-07-27 14:15:02 +08:00
|
|
|
|
<style>
|
|
|
|
|
|
.demo-box.demo-switch {
|
|
|
|
|
|
.el-switch {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
margin: 20px 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
2016-08-04 19:56:54 +08:00
|
|
|
|
<script>
|
|
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
value1: true,
|
|
|
|
|
|
value2: true,
|
|
|
|
|
|
value3: true
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
};
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
2016-07-27 14:15:02 +08:00
|
|
|
|
## 基本用法
|
|
|
|
|
|
|
|
|
|
|
|
<div class="demo-box demo-switch">
|
2016-08-04 19:56:54 +08:00
|
|
|
|
<el-switch v-model="value1"></el-switch>
|
2016-07-27 14:15:02 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
2016-08-04 19:56:54 +08:00
|
|
|
|
<el-switch v-model="value1"></el-switch>
|
2016-07-27 14:15:02 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 禁用状态
|
|
|
|
|
|
|
|
|
|
|
|
<div class="demo-box demo-switch">
|
|
|
|
|
|
<el-switch disabled></el-switch>
|
|
|
|
|
|
<el-switch disabled :value="false"></el-switch>
|
|
|
|
|
|
<el-switch on-text="" off-text="" disabled></el-switch>
|
|
|
|
|
|
<el-switch on-text="" off-text="" disabled :value="false"></el-switch>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
|
<el-switch disabled></el-switch>
|
|
|
|
|
|
<el-switch disabled :value="false"></el-switch>
|
|
|
|
|
|
<el-switch on-text="" off-text="" disabled></el-switch>
|
|
|
|
|
|
<el-switch on-text="" off-text="" disabled :value="false"></el-switch>
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 自定义颜色
|
|
|
|
|
|
|
|
|
|
|
|
<div class="demo-box demo-switch">
|
2016-08-04 19:56:54 +08:00
|
|
|
|
<el-switch on-color="#13ce66" off-color="#ff4949" v-model="value2"></el-switch>
|
|
|
|
|
|
<el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text="" v-model="value3"></el-switch>
|
2016-07-27 14:15:02 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
```html
|
2016-08-04 19:56:54 +08:00
|
|
|
|
<el-switch on-color="#13ce66" off-color="#ff4949" v-model="value2"></el-switch>
|
|
|
|
|
|
<el-switch on-color="#13ce66" off-color="#ff4949" on-text="" off-text="" v-model="value3"></el-switch>
|
2016-07-27 14:15:02 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## API
|
|
|
|
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
|
|
|
|
|
|---------- |-------- |---------- |------------- |-------- |
|
|
|
|
|
|
| value | switch 的选中状态 | boolean | | true |
|
|
|
|
|
|
| disabled | 禁用 | boolean | true, false | false |
|
|
|
|
|
|
| width | switch 的宽度（像素） | number | | 58（有文字）/ 46（无文字） |
|
|
|
|
|
|
| on-icon-class | switch 打开时所显示图标的类名 | string | | |
|
|
|
|
|
|
| off-icon-class | switch 关闭时所显示图标的类名 | string | | |
|
|
|
|
|
|
| on-text | switch 打开时的文字 | string | | 'ON' |
|
|
|
|
|
|
| off-text | switch 关闭时的文字 | string | | 'OFF' |
|
|
|
|
|
|
| on-color | switch 打开时的背景色 | string | | |
|
|
|
|
|
|
| off-color | switch 关闭时的背景色 | string | | |
|
|
|
|
|
|
| name | 对应 input 的 name 属性 | string | | |
|
2016-08-04 19:56:54 +08:00
|
|
|
|
| change | value 发生变化时的回调函数 | function | | |
|
