drip-ui/packages/switch/zh-CN.md

Lightweight Mobile UI Components built on Vue

## Switch 开关

### 使用指南
``` javascript
import { Switch } from 'drip-ui';

Vue.use(Switch);
```

### 代码演示

#### 常规
支持`primary`、`orange`、`green`四种类型，默认为`primary`

```html
<drip-switch
  :value="status"
  @changed="getChoose"
  type="primary"
  :data="dataList"
  :single="true">
</drip-switch >
```
```html
data() {
  return {
    status: false,
    dataList:[{
      name: '有',
      value: true
    }, {
      name: '无',
      value: false
    }]
  }
}

      
```

#### 禁用

通过`disabled`属性来禁用按钮，此时按钮不可点击

```html
<drip-switch
  :value="status"
  @changed="getChoose"
  :disabled="true">
</drip-switch >
```

#### 开关形状

```html
显示某一选项文字
<drip-switch
  :value="status"
  @changed="getChoose"
  :single="true">
</drip-switch >
两个选项文字都显示
<drip-switch
  :value="status"
  @changed="getChoose">
</drip-switch >
```

### API

| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| value | 按钮文字 | `Boolean` | - |
| type | 按钮类型，可选值为 `primary` `orange` `green` | `String` | `primary` |
| data | 按钮文字 | `Array` | - |
| disabled | 是否禁用按钮 | `Boolean` | `false` |
| single | 是否显示单个选项文字 | `Boolean` | `false` |

### Event

| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| changed | 点击按钮且按钮状态不为禁用时触发 | - |