CSwitchRadio 开关式单选组件

功能说明

CSwitchRadio 是一个开关式单选组件，用于在表单中提供是/否选择功能。组件基于 AtSwitch 封装，提供了两个选项（是/否）供用户选择，并支持自定义选项文本和对齐方式。

引用方式

import { CSwitchRadio } from '@components/forms/switch';

组件参数

• itemRes (Object，必填)：表单数据资源对象，表单组件内部机制专用
• checkAlign (String，可选)：选项对齐方式，可选值有 left、right，默认为 right
• checkedLabel (String，可选)：选中选项的文本，默认为"是"
• uncheckedLabel (String，可选)：未选中选项的文本，默认为"否"

使用示例

基础用法

<template>
  <CForm :form="form">
    <CFormItem name="isAdult" label="是否成年">
      <CSwitchRadio />
    </CFormItem>
  </CForm>
</template>

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

export default {
  components: {
    CForm,
    CFormItem,
    CSwitchRadio
  },
  data() {
    return {
      form: {
        isAdult: null
      }
    };
  }
};
</script>

自定义选项文本

<CFormItem name="hasExperience" label="是否有经验">
  <CSwitchRadio 
    checkedLabel="有" 
    uncheckedLabel="无" 
  />
</CFormItem>

左对齐选项

<CFormItem name="isMarried" label="婚姻状况">
  <CSwitchRadio 
    checkAlign="left" 
    checkedLabel="已婚" 
    uncheckedLabel="未婚" 
  />
</CFormItem>

注意事项

1. CSwitchRadio 组件的值为布尔类型，表示选中的是第一个选项（true）还是第二个选项（false）
2. 组件会根据表单项的 required 和 error 属性自动添加相应的样式
3. 选项对齐方式（checkAlign）决定了选项图标的显示位置：

• right：选项图标显示在文本右侧
• left：选项图标显示在文本左侧

1. 组件默认提供"是/否"两个选项，可以通过 checkedLabel 和 uncheckedLabel 属性自定义选项文本