TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索
Vue

Vant之Area 省市区选择使用(全国数据获取)

zyz
2021-04-06
/
1 评论
/
152 阅读
/
正在检测是否收录...
04/06

一、效果参考

全国范围内容的省市区选择,重要的就是数据来源。

二、Area组件

Area 省市区选择 通常与 弹出层 组件配合使用。 (注明: 在AddressEdit 地址编辑也是有地区的选择)

  • 组件数据格式说明

    整体是一个 Object,包含 province_list, city_list, county_list 三个 key。
    
    每项以省市区编码作为 key,省市区名字作为 value。编码为 6 位数字,前两位代表省份,中间两位代表城市,后两位代表区县,以 0 补足 6 位。如北京编码为 11,以零补足 6 位,为 110000。
    
    AreaList具体格式如下:
    
    {
      province_list: {
    110000: '北京市',
    120000: '天津市'
      },
      city_list: {
    110100: '北京市',
    110200: '县',
    120100: '天津市',
    120200: '县'
      },
      county_list: {
    110101: '东城区',
    110102: '西城区',
    110105: '朝阳区',
    110106: '丰台区'
    120101: '和平区',
    120102: '河东区',
    120103: '河西区',
    120104: '南开区',
    120105: '河北区',
    // ....
      }
    }
  • 组件数据来源
    查看组件GitHub的源代码中area.js这是数据源,但如何使用的呢?
  • 将数据文件导入到自己的项目中
  • 项目中的使用(以组件方式导入即可以使用)

    <template>
    <div class="edit-addr-view">
        <van-address-edit :area-list="areaList" show-set-default show-search-result :address-info='editValue' :search-result="searchResult"
         @save="onSave" @change-detail="onChangeDetail" />
    </div>
    </template>
    
    <script>
    // 导入area.js文件数据
    import AreaList from './area';
    
    import {
        AddressEdit
    } from 'vant';
    
    export default {
        name: 'editAddrView',
        props: ['editValue'],
        components: {
            [AddressEdit.name]: AddressEdit
        },
        data() {
            return {
                areaList:AreaList,    // 指定数据源
                searchResult: []
            }
        },
    
        methods: {
            onSave(content) {
                var new_addr = {
                    "id": content.id,
                    "name": content.name,
                    "tel": content.tel,
                    "address": content.city + content.county + content.addressDetail
                }
                
                // 发送ajax保存数据
                // 传递
                this.$emit('onSaveAddr', new_addr)
            },
            onChangeDetail(val) {
                if (val) {    // 地图定位
                    this.searchResult = [{
                        name: '黄龙万科中心',
                        address: '杭州市西湖区'
                    }];
                } else {
                    this.searchResult = [];
                }
            }
        }
    }
    </script>
    
    <style>
    </style>
赞(0)
评论 (1)
  1. 1 作者
    Windows 10 · Google Chrome

    {!{data:image/webp;base64,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}!}

    2021-05-04 回复