WebApp【公共组件库】@前端(For Git Submodule)
‘chensiAb’
2025-03-25 3b03f87a02458f719e2eb4bf112a13441b427d14
_cursor.ai/forms.doc/chinaArea.doc/CChinaArea.doc.md
@@ -2,7 +2,7 @@
## 功能说明
CChinaArea 是一个中国地区选择器组件,用于在表单中选择省市区地址。组件内置了完整的中国行政区划数据,支持省、市、区三级联动选择,并且可以设置默认值和只读模式。
CChinaArea 是一个中国地区选择器组件,用于在表单中选择省市区地址。组件内置了完整的中国行政区划数据,支持省、市、区(街道)多级联动选择,并且可以通过地理定位自动获取当前位置。
## 引用方式
@@ -13,11 +13,11 @@
## 组件参数
- `itemRes` (Object,必填):表单数据资源对象,表单组件内部机制专用
- `level` (Number,可选):选择层级,可选值为 1(省)、2(省市)、3(省市区),默认为 3
- `autoGeo` (Boolean,可选):是否自动通过地理定位获取省市区,默认为 false
- `level` (Number,可选):联动级别,默认为 3
  - `3`:省市区三级联动
  - `4`:省市区街道四级联动
- `placeholder` (String,可选):选择器占位提示文本
- `readOnly` (Boolean,可选):只读模式,默认为 false
- `separator` (String,可选):地址文本分隔符,默认为空格
- `defaultCode` (String,可选):默认选中的区域编码
## 使用示例
@@ -47,12 +47,7 @@
  data() {
    return {
      form: {
        address: {
          province: '',
          city: '',
          district: '',
          code: ''
        }
        address: []
      }
    };
  }
@@ -60,30 +55,34 @@
</script>
```
### 自定义配置
### 四级联动
```html
<CFormItem name="region" label="配送区域">
<CFormItem name="region" label="详细区域">
  <CChinaArea 
    :level="2"
    separator="/"
    defaultCode="330100"
    placeholder="请选择配送区域"
    :level="4"
    placeholder="请选择所在区域"
  />
</CFormItem>
```
### 自动获取地理位置
```html
<CFormItem name="location" label="当前位置">
  <CChinaArea
    :autoGeo="true"
    placeholder="正在获取位置..."
  />
</CFormItem>
```
## 注意事项
1. 组件返回的数据格式为对象,包含以下字段:
   - `province`:省份名称
   - `city`:城市名称
   - `district`:区县名称(仅在 level=3 时有值)
   - `code`:选中区域的行政区划代码
2. 可以通过 `defaultCode` 设置默认选中的区域
3. `level` 参数决定了选择的层级:
   - 1:仅选择省份
   - 2:选择省份和城市
   - 3:选择省份、城市和区县
4. 组件会根据当前选择自动联动更新下级选项
5. 在只读模式下,地址信息将以文本形式显示,使用 `separator` 分隔
1. 组件返回的数据格式为数组,包含选中的地区名称:
   - 三级联动:`['浙江省', '杭州市', '西湖区']`
   - 四级联动:`['浙江省', '杭州市', '西湖区', '文三路街道']`
2. 当启用地理定位功能(`autoGeo=true`)时,组件会尝试获取当前位置的省市区信息
3. 组件会根据当前选择自动联动更新下级选项
4. 地区数据源来自内置的中国行政区划数据
5. 位置信息在表单中显示时,地址各级之间会以 ` / ` 分隔