#  Switch开关
---
#### 表示两种相对对立的状态间的切换,多用于触发「开/关」。
### 基础用法

<div class="demo-block">
<div>

  <y-switch :value="false" true-text="开" false-text="关"></y-switch>
  <span style="width:35px;display:inline-block;height:5px;"></span>
  <y-switch v-model="checked" ></y-switch>
  <span style="width:55px;display:inline-block;height:5px;"></span>
  <y-switch :value="false" true-text="开" false-text="关" type="success"></y-switch>
  <span style="width:35px;display:inline-block;height:5px;"></span>
  <y-switch v-model="checked00" type="success" ></y-switch>
</div>
<div style="margin-top:20px">

  <y-switch :value="true" true-text="开" false-text="关"></y-switch>
  <span style="width:35px;display:inline-block;height:5px;"></span>
  <y-switch v-model="checked02" ></y-switch>
  <span style="width:55px;display:inline-block;height:5px;"></span>
  <y-switch :value="true" true-text="开" false-text="关" type="success"></y-switch>
  <span style="width:35px;display:inline-block;height:5px;"></span>
  <y-switch v-model="checked03" type="success" ></y-switch>
</div>


</div>
<script>
  export default{
    data(){
      return{
        checked:false,
        checked00:false,
        checked01:true,
        checked02:true,
        checked03:true,
        checked04:false,
        checked05:false,
        checked06:true
      }
    }
  }
</script>

::: demo

``` html
<template>
  <y-switch :value="false" true-text="开" false-text="关"></y-switch>
  <y-switch v-model="checked" ></y-switch>
  <y-switch :value="false" true-text="开" false-text="关" type="success"></y-switch>
  <y-switch v-model="checked00" type="success" ></y-switch>
  <y-switch :value="true" true-text="开" false-text="关"></y-switch>
  <y-switch v-model="checked02" ></y-switch>
  <y-switch :value="true" true-text="开" false-text="关" type="success"></y-switch>
  <y-switch v-model="checked03" type="success" ></y-switch>
</template>

<script>
  export default{
    data(){
      return{
        checked:false,
        checked00:false,
        checked02:true,
        checked03:true,
      }
    }
  }
</script>
```
:::


### 禁用用法
通过添加```disabled```禁用状态

<div class="demo-block">
  <div>

  <y-switch :value="false" true-text="开" false-text="关" disabled></y-switch>
  <span style="width:35px;display:inline-block;height:5px;"></span>
  <y-switch v-model="checked04" disabled></y-switch>
  <span style="width:55px;display:inline-block;height:5px;"></span>
  <y-switch :value="false" true-text="开" false-text="关" type="success" disabled></y-switch>
  <span style="width:35px;display:inline-block;height:5px;"></span>
  <y-switch v-model="checked05" type="success" disabled></y-switch>
</div>
<div style="margin-top:20px">

  <y-switch :value="true" true-text="开" false-text="关" disabled></y-switch>
  <span style="width:35px;display:inline-block;height:5px;"></span>
  <y-switch v-model="checked06" disabled></y-switch>
  <span style="width:55px;display:inline-block;height:5px;"></span>
  <y-switch :value="true" true-text="开" false-text="关" type="success" disabled></y-switch>
  <span style="width:35px;display:inline-block;height:5px;"></span>
  <y-switch v-model="checked06" type="success" disabled></y-switch>
</div>
</div>

::: demo

```html
<template>
 <y-switch :value="false" true-text="开" false-text="关" disabled></y-switch>
  <y-switch v-model="checked04" disabled></y-switch>
  <y-switch :value="false" true-text="开" false-text="关" type="success" disabled></y-switch>
  <y-switch v-model="checked05" type="success" disabled></y-switch>
  <y-switch :value="true" true-text="开" false-text="关" disabled></y-switch>
  <y-switch v-model="checked06" disabled></y-switch>
  <y-switch :value="true" true-text="开" false-text="关" type="success" disabled></y-switch>
  <y-switch v-model="checked06" type="success" disabled></y-switch>
</template>
<script>
  export default{
    data(){
      return{
        checked04:false,
        checked05:false,
        checked06:true
      }
    }
  }
</script>
```
:::





### y-switch 属性说明
| 属性      | 说明     | 类型      | 可选值        | 默认值   |
|---------- |--------  |---------- |-------------  |-------- |
|value|指定当前是否选中，可以使用 v-model 双向绑定数据|Boolean|true/false|false|
| disabled  | 是否禁用 | boolean   |    true/false    | false   |
| type | 主题颜色 可传入 success，primary| String |    --   | primary|
| true-text  | 当value为true时 ，显示的文字 | String  |  -- |  --  |
| false-text  | 当value为false时 ，显示的文字 | String  |  -- |  --  |
| change  | 当value改变时触发，返回true，false | Function  |  -- |  --  |