# SuSwitch 开关。

## 导入使用
```code[javascript]
import SuSwitch from "ss-universal-client-web/comp/widget/su-switch";
```

### 基础用法

:::demo 
```html
<template>
<div>
    <su-switch  v-model="value"
                :disabled="disabled"
                :width="57"
                :active-text="'启用'"
                :inactive-text="'禁用'" 
                :active-value="1"
                :inactive-value="0"
                @changeStatus="change"></su-switch>
</div>

</template>
<script>

export default {
    components:{
        SuSwitch
    },
    data(){
        return {
            value: 1,
            disabled: false
        }
    },
    methods: {
       change() {
           this.disabled = true;
            setTimeout(()=>{
                this.disabled = false;
            }, 3000)
        }   
    }
};
</script>
```
:::
### Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| value       | 绑定值 | boolean / string / number  | -	 | - |
| disabled         | 是否禁用		| boolean | - | false |
| width       | switch 的宽度（像素） | number  | -	 | 40 |
| active-text     | switch 打开时的文字描述	 |string | - | - |
| inactive-text     | switch 关闭时的文字描述	 |string | - | - |
| active-value     | switch 打开时的值	 |boolean / string / number	 | - | true |
| inactive-value     | switch 关闭时的值	 |boolean / string / number	 | - | false |


### Events
| 事件名称      | 说明          | 回调参数      |
|---------- |-------------- |---------- |
| changeStatus   | switch 状态发生变化时的回调函数 | 新状态的值 |