# CCheckBox 复选框组件

## 功能说明

CCheckBox 是一个复选框组件，用于在表单中提供多选或单选功能。组件支持两种显示模式：直接显示模式和弹窗选择模式，以及两种选择类型：多选和单选。

## 引用方式

```js
import { CCheckBox } from '@components/forms/checkbox';
```

## 组件参数

- `itemRes` (Object，必填)：表单数据资源对象，表单组件内部机制专用
- `options` (Array，可选)：选项列表，每个选项应包含 label 和 value 属性，默认为空数组
- `boxType` (String，可选)：勾选类型，可选值有 checkbox（多选）、radio（单选），默认为 checkbox
- `displayType` (String，可选)：显示模式，可选值有 plane（直接显示）、dialog（弹窗选择），默认为 plane
- `placeholder` (String，可选)：输入框占位提示文本

## 使用示例

### 基础用法（多选，直接显示模式）

```html
<template>
  <CForm :form="form">
    <CFormItem name="hobbies" label="兴趣爱好">
      <CCheckBox 
        :options="hobbiesOptions" 
        placeholder="请选择兴趣爱好" 
      />
    </CFormItem>
  </CForm>
</template>

<script>
import { CForm, CFormItem } from '@components/forms/form';
import { CCheckBox } from '@components/forms/checkbox';

export default {
  components: {
    CForm,
    CFormItem,
    CCheckBox
  },
  data() {
    return {
      form: {
        hobbies: []
      },
      hobbiesOptions: [
        { label: '阅读', value: 'reading' },
        { label: '音乐', value: 'music' },
        { label: '运动', value: 'sports' },
        { label: '旅行', value: 'travel' },
        { label: '电影', value: 'movie' }
      ]
    };
  }
};
</script>
```

### 单选模式

```html
<CFormItem name="gender" label="性别">
  <CCheckBox 
    boxType="radio" 
    :options="genderOptions" 
    placeholder="请选择性别" 
  />
</CFormItem>
```

```js
data() {
  return {
    form: {
      gender: ''
    },
    genderOptions: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' }
    ]
  };
}
```

### 弹窗选择模式

```html
<CFormItem name="skills" label="技能">
  <CCheckBox 
    displayType="dialog" 
    :options="skillsOptions" 
    placeholder="请选择技能" 
  />
</CFormItem>
```

```js
data() {
  return {
    form: {
      skills: []
    },
    skillsOptions: [
      { label: 'JavaScript', value: 'js' },
      { label: 'HTML', value: 'html' },
      { label: 'CSS', value: 'css' },
      { label: 'Vue', value: 'vue' },
      { label: 'React', value: 'react' },
      { label: 'Node.js', value: 'node' }
    ]
  };
}
```

## 注意事项

1. 组件支持两种选择类型：
   - `checkbox`：多选模式，可以选择多个选项，表单值为数组
   - `radio`：单选模式，只能选择一个选项，表单值为单个值
2. 组件支持两种显示模式：
   - `plane`：直接显示模式，选项直接显示在表单项下方
   - `dialog`：弹窗选择模式，点击表单项后弹出选择弹窗
3. 当选项较多时，建议使用弹窗选择模式（`displayType="dialog"`）
4. 在多选模式下，表单值为选中项的 value 值组成的数组
5. 在单选模式下，表单值为选中项的 value 值
6. 组件会自动根据表单值显示已选项的文本，多个选项时用逗号分隔