CChinaArea 中国地区选择器组件

功能说明

CChinaArea 是一个中国地区选择器组件，用于在表单中选择省市区地址。组件内置了完整的中国行政区划数据，支持省、市、区三级联动选择，并且可以设置默认值和只读模式。

引用方式

import { CChinaArea } from '@components/forms/chinaArea';

组件参数

• itemRes (Object，必填)：表单数据资源对象，表单组件内部机制专用
• level (Number，可选)：选择层级，可选值为 1（省）、2（省市）、3（省市区），默认为 3
• placeholder (String，可选)：选择器占位提示文本
• readOnly (Boolean，可选)：只读模式，默认为 false
• separator (String，可选)：地址文本分隔符，默认为空格
• defaultCode (String，可选)：默认选中的区域编码

使用示例

基础用法

<template>
  <CForm :form="form">
    <CFormItem name="address" label="所在地区">
      <CChinaArea 
        placeholder="请选择所在地区" 
      />
    </CFormItem>
  </CForm>
</template>

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

export default {
  components: {
    CForm,
    CFormItem,
    CChinaArea
  },
  data() {
    return {
      form: {
        address: {
          province: '',
          city: '',
          district: '',
          code: ''
        }
      }
    };
  }
};
</script>

自定义配置

<CFormItem name="region" label="配送区域">
  <CChinaArea 
    :level="2" 
    separator="/" 
    defaultCode="330100" 
    placeholder="请选择配送区域" 
  />
</CFormItem>

注意事项

1. 组件返回的数据格式为对象，包含以下字段：

• province：省份名称
• city：城市名称
• district：区县名称（仅在 level=3 时有值）
• code：选中区域的行政区划代码

1. 可以通过 defaultCode 设置默认选中的区域
2. level 参数决定了选择的层级：

• 1：仅选择省份
• 2：选择省份和城市
• 3：选择省份、城市和区县

1. 组件会根据当前选择自动联动更新下级选项
2. 在只读模式下，地址信息将以文本形式显示，使用 separator 分隔