<script>
    export default {
        data(){
            return {
                switchVar:false,
                disabled:true,
                switchVar2:false
            }
        },
        methods:{
            onChange(val){
                // console.log("当前 switch 的状态是:",val?'开':'关')
            }
        },
        mounted(){
            setTimeout(()=>{
                this.disabled = false
                this.switchVar2 = true
            },5000)
        }
    }
</script>
# Switch

### 通过size属性控制`switch`控件的大小
:::demo
```html
<i-switch :size="'sm'" >开关</i-switch>
```
:::

### 通过绑定 v-model 值来控制`switch`控件的开关

:::demo
```html
<i-switch v-model="switchVar" @on-change="onChange">开关</i-switch>
```
```javaScript
<script>
    export default {
        data(){
            return {
                switchVar:false
            }
        },
        methods:{
            onChange(val){
                // console.log("当前 switch 的状态是:",val?'开':'关')
            }
        }
    }
</script>
```
:::

### 禁用`switch`控件，5秒后解禁并打开开关。
:::demo
```html
<i-switch v-model="switchVar2" :disabled="disabled">开关</i-switch>
```
```javaScript
<script>
    export default {
        data(){
            return {
                disabled:true,
                switchVar2:false
            }
        },
        mounted(){
            setTimeout(()=>{
                this.disabled = false
                this.switchVar2 = true
            },5000)
        }
    }
</script>
```
:::


### Switch Attributes
| 参数      | 说明          | 类型      | 可选值       | 默认值  |
|---------- |------------- |---------------|------------  |-------- |
| size | switch控件的大小 | `String` | `xs`、`sm`、`lg`、`xlg` | `lg` |
| value | 通过v-model来绑定控件，控制控件的开关 | `Boolean` | — | — |
| disabled | 是否禁用 | `Boolean` | — | 否 |

### Switch Events
| 名称      |  参数       | 描述 |
|---------- |------------- |---------------|
| on-change | (Params) | — |

