drip-ui/packages/select-button/zh-CN.md

Lightweight Mobile UI Components built on Vue

## SelectButton 选择按钮--单选，多选

### 使用指南

``` javascript
import { SelectButton } from 'drip-ui';

Vue.use(SelectButton);
```

### 代码演示

#### 单选按钮

```html
<!-- 单选按钮 -->
<drip-select-button
  :list="relTypeList"
  @getValue="selectRelType"
  :values="relType1">
</drip-select-button>

<!-- 多选按钮 -->
<drip-select-button
  :list="relTypeList"
  @getValue="selectRelType"
  :type="'multiple'"
  :values="relType2">
</drip-select-button>

<!-- 部分选项不可选 -->
<drip-select-button
  :list="relTypeList2"
  @getValue="selectRelType"
  :values="relType3"
  :width="'3rem'">
</drip-select-button>
```

```javascript
data () {
  return {
    relTypeList: [{
      name: '本人',
      value: 1
    }, {
      name: '配偶',
      value: 2
    }, {
      name: '父母',
      value: 3
    }, {
      name: '子女',
      value: 4
    }],
    relTypeList2: [{
      name: '本人',
      value: 1
    }, {
      name: '配偶',
      value: 2,
      disabled: true,
    }, {
      name: '父母',
      value: 3
    }, {
      name: '子女',
      value: 4
    }],
    relType1: [1],
    relType2: [2],
    relType3: [1],
  }
},
methods: {
  selectRelType (val) {
    console.log(val)
  }
}
```

```javascript
// list 数据格式
[{
  name: '', // 展示名字
  value: '', // 值
  disabled: - // 是否可选，没有默认可选
}, {
  name: '',
  value: ''
}]
```

### API

| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| list | 选择列表 | `Array` | - |
| values | 选中的值 | `Array` | - |
| type | 类型 默认是单选 | `String` | 'radio' |
| width | 自定义按钮宽度 | `String` | - |

### Event

| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| getValue | 当前选中的按钮值 | - |