mirror of https://github.com/ElemeFE/element
74 lines
2.2 KiB
Markdown
74 lines
2.2 KiB
Markdown
<style>
|
||
.demo-box.demo-switch {
|
||
.el-switch {
|
||
display: block;
|
||
margin: 20px 0;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
value1: true,
|
||
value2: true,
|
||
value3: true
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
## 基本用法
|
||
|
||
<div class="demo-box demo-switch">
|
||
<el-switch v-model="value1"></el-switch>
|
||
</div>
|
||
|
||
```html
|
||
<el-switch v-model="value1"></el-switch>
|
||
```
|
||
|
||
## 禁用状态
|
||
|
||
<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">
|
||
<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>
|
||
</div>
|
||
|
||
```html
|
||
<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>
|
||
```
|
||
|
||
## 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 | | |
|
||
| change | value 发生变化时的回调函数 | function | | |
|