使用vue+mintui 开发省市区功能

做移动端的都知道 经常会有省市区这种三级联动的功能 今天研究了一下午~

1.准备工作 vue+mintui+省市区的json数据

下载地址：https://github.com/chzm/address_popup

下载好后需要3个json文件 进入dist找到这3个文件

将这3个文件放入到vue项目里 

新建一个处理这3个json方法的文件

import provinces from '../../static/provinces.json'
import areas from '../../static/areas.json'
import cities from '../../static/cities.json'

export const zmGetProvinces = () => {
    return provinces;
}

export const zmGetcities = (provinceCode) => {
    if (!provinceCode) {
        provinceCode = '11'
    }
    let citiesArr = [];
    cities.forEach(function (item) {
        if (item.provinceCode == provinceCode) {
            console.log(item)
            citiesArr.push(item)
        }
    })
    return citiesArr
}

export const zmGetareas = (cityCode) => {
    // console.log(areas)
    if (!cityCode) {
        cityCode = '1101'
    }
    let areasArr = [];
    areas.forEach(function (item) {
        if (item.cityCode == cityCode) {
            areasArr.push(item)
        }
    })
    return areasArr
}

在这文件处理下数据依次导出

接着可以将省市区做成一个组件方便后续使用 这里我使用的是mintui里的popup和picker这2个组件来搭配

这里有个坑就是天津和北京市这2个地方滑动的时候数据不会重新刷新 在这里做了个处理

最后将组件导入需要用到的地方

这里用到了props组件见的双向绑定 自行百度~~

使用一个点击事件改变sexpopup的状态 

最后附上效果图 大功告成 记录下！~~~~~

 

转载于:https://www.cnblogs.com/xiechuanghong/p/10580340.html