CCheckBox 复选框组件

功能说明

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

引用方式

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

组件参数

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

使用示例

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

<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>

单选模式

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

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

弹窗选择模式

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

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：弹窗选择模式，点击表单项后弹出选择弹窗

1. 当选项较多时，建议使用弹窗选择模式（displayType="dialog"）
2. 在多选模式下，表单值为选中项的 value 值组成的数组
3. 在单选模式下，表单值为选中项的 value 值
4. 组件会自动根据表单值显示已选项的文本，多个选项时用逗号分隔
5. 使用单选模式时，确保传入的表单值如果为单个值而非数组，否则可能导致显示异常