lighting-ui/packages/lc-checkbox/README_cn.md

A rich interaction, lightweight, high performance UI library based on Weex

# lc-checkbox 

> Weex 复选框组件

### 规则
- 建议以成组的方式出现，使用`lc-checkbox-list`


## [Demo](https://h5.m.taobao.com/trip/lc-checkbox/index.html?_wx_tpl=https%3A%2F%2Fh5.m.taobao.com%2Ftrip%2Flc-checkbox%2Fdemo%2Findex.native-min.js)

<img src="https://gw.alipayobjects.com/zos/rmsportal/uvtUDCJtVFhvszyfsLBJ.gif" width="240"/>&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://img.alicdn.com/tfs/TB1aLygSpXXXXXVXFXXXXXXXXXX-200-200.png" width="160"/>


## 使用方法

```vue
<template>
  <div class="wxc-demo">
    <scroller class="scroller">
      <lc-checkbox label="默认"
        :has-top-border="true"></lc-checkbox>
      <lc-checkbox label="默认选中"
        :checked="true"></lc-checkbox>
      <lc-checkbox label="未选中不可更改"
        :disabled="true"></lc-checkbox>
      <lc-checkbox label="选中不可更改"
        :disabled="true"
        :checked="true"
        :has-bottom-border="true"></lc-checkbox>
      <div class="margin">
       <lc-checkbox-list :list="list"
          @LcCheckBoxListChecked="LcCheckBoxListChecked"></lc-checkbox-list>
        <text class="checked-text">选中项 {{checkedList.toString()}}</text>
      </div>
    </scroller>
  </div>
</template>

<script>
  import { LcCheckbox,LcCheckboxList } from 'weex-ui'
  export default {
    components: { LcCheckbox, LcCheckboxList },
    data: () => ({
      list: [
        { title: '选项1', value: 1 },
        { title: '选项2', value: 2, checked: true },
        { title: '选项3', value: 3 },
        { title: '选项4', value: 4 }
      ],
      checkedList: [2]
    }),
    methods: {
      LcCheckboxListChecked (e) {
        this.checkedList = e.checkedList;
      }
    }
  }
</script>

```

更多详细情况可以参考 [demo](https://github.com/alibaba/weex-ui/blob/master/example/checkbox/index.vue)


### 可配置参数
#### Checkbox
| Prop | Type | Required | Default | Description |
| ---- |:----:|:---:|:-------:| :----------:|
| label | `String` | `Y` | `-` | checkbox标签 |
| Value | `[String、Number、Object]` | `Y` | `-` | checkbox的value |
| checked | `Boolean` | `N` | `false` | checkbox是否选中 |
| disabled | `Boolean` | `N` | `false` | checkbox是否不可选 |
| config | `Object` | `N` | `{}` | 覆盖颜色和 icon|
| labelStyle | `Object` | `N` | `-` | checkbox标签样式 |
| has-top-border | `Boolean` | `N` | `false` | checkbox是否有上边框 |
| has-bottom-border | `Boolean` | `N` | `false` | checkbox是否有下边框 |

- 事件回调
```
//点击事件回调  `@LcCheckboxItemChecked="LcCheckboxItemChecked"`
将会返回e.value、e.checked
```

#### CheckboxList
| Prop | Type | Required | Default | Description |
| ---- |:----:|:---:|:-------:| :----------:|
| list | `Array` | `Y` | `[]` | checkbox列表配置 (*1) |
| config | `Object` | `N` | `{}` | 覆盖颜色和 icon (*2)|

- 注1: `list`
```
const list=[
        { title: '选项1', value: 1 },
        { title: '选项2', value: 2, checked: true },
        { title: '选项3', value: 3 },
        { title: '选项4', value: 4 }
      ];
```

- 注2: `config`

```
// 你可以这样覆盖样式和 icon:
<lc-checkbox-list :list="list"
                   :config="config"
                   @LcCheckboxListChecked="LcCheckboxListChecked"></lc-checkbox-list>

const config={
    checkedIcon:'https://gw.alicdn.com/tfs/TB1Y9vlpwMPMeJjy1XcXXXpppXa-72-72.png',
    disabledIcon:'https://gw.alicdn.com/tfs/TB1PtN3pwMPMeJjy1XdXXasrXXa-72-72.png',
    checkedDisabledIcon:'https://gw.alicdn.com/tfs/TB1aPabpwMPMeJjy1XcXXXpppXa-72-72.png',
    unCheckedDisabledIcon:'https://gw.alicdn.com/tfs/TB1lTuzpwoQMeJjy0FoXXcShVXa-72-72.png',
    checkedColor: '#000000'
}
```

- 事件回调
```
//点击事件回调  `@LcCheckboxListChecked="LcCheckboxListChecked"`
将会返回已经选中的e.checkedList
```