| | |
| | | |
| | | ## 功能说明 |
| | | |
| | | CChinaArea 是一个中国地区选择器组件,用于在表单中选择省市区地址。组件内置了完整的中国行政区划数据,支持省、市、区三级联动选择,并且可以设置默认值和只读模式。 |
| | | CChinaArea 是一个中国地区选择器组件,用于在表单中选择省市区地址。组件内置了完整的中国行政区划数据,支持省、市、区(街道)多级联动选择,并且可以通过地理定位自动获取当前位置。 |
| | | |
| | | ## 引用方式 |
| | | |
| | |
| | | ## 组件参数 |
| | | |
| | | - `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,可选):默认选中的区域编码 |
| | | |
| | | ## 使用示例 |
| | | |
| | |
| | | data() { |
| | | return { |
| | | form: { |
| | | address: { |
| | | province: '', |
| | | city: '', |
| | | district: '', |
| | | code: '' |
| | | } |
| | | address: [] |
| | | } |
| | | }; |
| | | } |
| | |
| | | </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. 位置信息在表单中显示时,地址各级之间会以 ` / ` 分隔 |