vue+webpack+amaze-vue实现省市区联动选择组件

创建工程

创建工程目录 vue-city-picker

使用vue-cli初始化webpack工程

如果没有安装vue-cli的同学请走 传送门

在vue-city-picker同级目录下执行

vue init webpack vue-city-picker

接下来出现的提示可以参考下图

npm安装amaze-vue

cd vue-city-pickernpm npm install amaze-vue --savenpm install

开发准备

启动webpack-dev-server

    npm run dev

此时在浏览器中访问http://127.0.0.1:8080/就可以访问了

整理目录（没有代码洁癖的请自行跳过）

• 删除 src/assets
• 删除 src/components
• 清空 src/App.vue

拷入城市数据

将提示准备好的location.js 文件拷贝到src目录下。
同学可以根据自己的情况自己拷入城市数据，代码里提供的数据仅供参考。

开始开发

编辑src/main.js 引入amaze-vue组件库

import Vue from 'vue'import App from './App'import AmazeVue from 'amaze-vue';import 'amaze-vue/dist/amaze-vue.css';Vue.config.productionTip = falseVue.use(AmazeVue);/* eslint-disable no-new */new Vue({  el: '#app',  template: '<App/>',  components: { App }})

编辑src/App.vue

<template>    <div class="container">        <section class="city-picker">            <am-select @select="proviceHandle" :options="province" search placeholder="请选择省、直辖市"></am-select>            <am-select v-if="city.length > 0" @select="cityHandle" search :options="city" placeholder="请选择市、区"></am-select>            <am-select v-if="county.length > 0" @select="countyHandle" search :options="county" placeholder="请选择区、县"></am-select>        </section>        <p v-if="address">您选择的是：<span class="am-text-success">{{ address }}</span></p>    </div></template><script>    import locationData from './location';    export default {        name: 'city-picker',        data() {            const province = [];            for (let code in locationData) {                let item = locationData[code];                province.push(Object.assign(item, {                    label: item.name                }));            }            return {                province,                city: [],                county: [],                selectProvince: null,                selectCity: null,                selectCounty: null            };        },        methods: {            proviceHandle(value) {                const city = [];                for (let code in value.cities) {                    let item = value.cities[code];                    city.push(Object.assign(item, {                        label: item.name                    }));                }                this.city = city;                this.county = [];                this.selectProvince = value.name;                this.selectCity = null;                this.selectCounty = null;            },            cityHandle(value) {                const county = [];                for (let code in value.districts) {                    let item = value.districts[code];                    county.push({                        code,                        label: item,                        name: item                    });                }                this.county = county;                this.selectCity = value.name;                this.selectCounty = null;            },            countyHandle(value) {                this.selectCounty = value.name;            }        },        computed: {            address() {                const { selectProvince, selectCity, selectCounty } = this;                return (selectProvince ? selectProvince : '') +                    (selectCity ? '，' + selectCity : '') +                    (selectCounty ? '，' + selectCounty : '');            }        }    }</script><style>    .container {        width: 800px;        height: 800px;        padding-top: 80px;        margin: auto;    }    .city-picker {        margin-bottom: 20px;    }</style>

实现效果

效果图

代码

https://github.com/sunshineJi/vue-city-picker

使用方法

git clone https://github.com/sunshineJi/vue-city-picker.gitcd vue-city-pickernpm inpm run dev

提示

此demo只是提供一个思路去解决联动选择的问题，线上需求还请使用的同学根据具体情况优化代码后使用。

广告ಠ౪ಠ

amaze-vue是一只基于amazeui 和 vue.js的响应式组件库，项目刚刚起步，希望大家多多支持。

项目地址

amaze-vue

使用文档

document