CChinaArea 中国地区选择器组件

功能说明

CChinaArea 是一个中国地区选择器组件，用于在表单中选择省市区地址。组件内置了完整的中国行政区划数据，支持省、市、区(街道)多级联动选择，并且可以通过地理定位自动获取当前位置。

引用方式

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

组件参数

• itemRes (Object，必填)：表单数据资源对象，表单组件内部机制专用
• autoGeo (Boolean，可选)：是否自动通过地理定位获取省市区，默认为 false
• level (Number，可选)：联动级别，默认为 3
• 3：省市区三级联动
• 4：省市区街道四级联动
• placeholder (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: []
      }
    };
  }
};
</script>

四级联动

<CFormItem name="region" label="详细区域">
  <CChinaArea 
    :level="4" 
    placeholder="请选择所在区域" 
  />
</CFormItem>

自动获取地理位置

<CFormItem name="location" label="当前位置">
  <CChinaArea 
    :autoGeo="true" 
    placeholder="正在获取位置..." 
  />
</CFormItem>

注意事项

1. 组件返回的数据格式为数组，包含选中的地区名称：

• 三级联动：['浙江省', '杭州市', '西湖区']
• 四级联动：['浙江省', '杭州市', '西湖区', '文三路街道']

1. 当启用地理定位功能（autoGeo=true）时，组件会尝试获取当前位置的省市区信息
2. 组件会根据当前选择自动联动更新下级选项
3. 地区数据源来自内置的中国行政区划数据
4. 位置信息在表单中显示时，地址各级之间会以 / 分隔