# 复选框组件

### 介绍

复选框组件（Vant 的二次封装）；选项来源支持数据字典、自定义数据源及数据项。

### 引入

```js
import { Vue } from "vue";
import { Checkbox } from "@bingoit/mobile-ui";

Vue.use(Checkbox);
```

## 代码演示

### 基础用法

```html
<bgo-checkbox
    label="测试"
    v-model="testValue"
    required
    data-source="dict"
    item="/dict/items/YES_OR_NO"
/>
```

## API

### Props

| 名称            | 说明                   | 类型                          | 可选值                    | 默认值     |
| --------------- | ---------------------- | ----------------------------- | ------------------------- | ---------- |
| v-model         | 当前输入的值           | _number_ / _string_ / _array_ | -                         |
| label           | 表单的标签文本         | _string_                      | -                         | -          |
| placeholder     | 输入框占位文本         | _string_                      | -                         | -          |
| required        | 是否显示表单必填星号   | _boolean_                     | `true` / `false`          | `false`    |
| disabled        | 是否禁用               | _boolean_                     | `true` / `false`          | `false`    |
| readonly        | 是否只读               | _boolean_                     | `true` / `false`          | `false`    |
| hidden          | 是否隐藏               | _boolean_                     | `true` / `false`          | `false`    |
| rule-prop       | 表单验证规则           | _string_                      | -                         | -          |
| data-source     | 数据源类型             | _string_                      | `custom` / `dict` / `url` | -          |
| is-data-convert | 数据源数据是否需要转换 | _boolean_                     | `true` / `false`          | `true`     |
| item            | 数据源对应的数据       | _string_ / _array_            | -                         | -          |
| form-prop-rules | 表单验证规则           | _array_                       | -                         | -          |
| direction       | 排列方向               | _string_                      | `horizontal` / `vertical` | `vertical` |

-   注：`data-source`属性为：
    1. “custom”时，`item`属性值为自定义的选项数组：如：

```json
[
    {
        "label": "选项1",
        "value": "option1"
    },
    {
        "label": "选项2",
        "value": "option2"
    }
]
```

2. “dict”时，`item`属性值为数据字典对应的 URL 地址；如: “/dict/item/YES_OR_NO”；

3. “url”时，`item`属性值为自定义源的 URL 地址。

### Events

| 事件           | 说明                     | 回调参数                 |
| -------------- | ------------------------ | ------------------------ |
| change         | 当绑定值变化时触发的事件 | _value: any[]_           |
| dataListChange | 当数据列表变更时触发     | _value: Array\<object\>_ |