TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索
Vue

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

zyz
2021-04-06
/
3 评论
/
1,908 阅读
/
正在检测是否收录...
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)
评论 (3)
  1. Nikhil 作者
    Windows 10 · Google Chrome

    I read your post. It is very informative and helpful to me. I admire the message valuable information you provided in your article.
    power bi certification

    2021-06-25 回复
    1. Nikhil 作者
      Windows 10 · Google Chrome
      @Nikhil

      I read your post. It is very informative and helpful to me. I admire the message valuable information you provided in your article.
      https://www.igmguru.com/data-science-bi/power-bi-certification-training/

      2021-06-25 回复
  2. 作者
    Windows 10 · Google Chrome

    老师,您好!我是头歌课程研发中心主管,我在udemy看到了您的课程,做的非常棒!我们平台作为国内面向大学实践教学的toB平台,有近百万的大学生用户,下一步想在toC发力,您有兴趣聊聊开课的事情吗?
    微信 TheGrinchhh

    2022-01-18 回复