vue+webpack+amaze-vue實現省市區聯動選擇元件

抽菸的兔子不會跳發表於2017-12-11
VueWeb元件

建立工程

建立工程目錄 vue-city-picker

使用vue-cli初始化webpack工程

如果沒有安裝vue-cli的同學請走 傳送門

在vue-city-picker同級目錄下執行

vue init webpack vue-city-picker
複製程式碼

接下來出現的提示可以參考下圖

vue-cli安裝提示

npm安裝amaze-vue

cd vue-city-picker
npm npm install amaze-vue --save
npm 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 = false
Vue.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.git
cd vue-city-picker
npm i
npm run dev
複製程式碼

提示

此demo只是提供一個思路去解決聯動選擇的問題，線上需求還請使用的同學根據具體情況優化程式碼後使用。

廣告ಠ౪ಠ

amaze-vue是一隻基於amazeui 和 vue.js的響應式元件庫，專案剛剛起步，希望大家多多支援。

專案地址

amaze-vue

使用文件

document

相關文章