基於vue的三級聯動地址選擇組件（適用於移動端）

vux->XAddress

地址組件封裝

components/address/pcaSelect.vue

<template>
    <div class="pca-select-wrapper">
        <x-address title="選擇地區" popup-title="選擇地區" style="display:none;" v-model="chooseAddr" :list="addressData" :show.sync="showAddress" @on-hide="getChoose">
        </x-address>
    </div>
</template>

<script>
    import { XAddress, Group } from 'vux'
    import addrApi from '@/api/order/address.js'  // 接口文件，地址數據也能夠從網上查找
    export default {
        components: {
            XAddress,
            Group
        },
        props: {
            // 彈框關閉後是否清除已選擇數據
            clearAddrData: {
                default: false,
                type: Boolean,
                require: false
            }
        },
        data() {
            return {
                showAddress: false,  // 是否顯示選擇地址彈框
                resultPostcode: '',  // 郵編
                resultAddr: [],  // 數據作了處理 最終結果須要處理   省前+0  市前+ 00   區前+ 000   -- 接口返回數據未處理區分省、市、區
                chooseAddr: [],  // 選擇的地址
                addressData: [], // 地址數據列表
                ADDR_PRO: [],  // 地址-省-數據列表
                ADDR_CI: [],  // 地址-市-數據列表
                ADDR_DIS: [],  // 地址-區-數據列表
            }
        },
        mounted() {
            this.getAddrList()
        },
        methods: {
            // 肯定或取消以後，重置數據
            clearAddr() {
                this.resultPostcode = ''
                this.resultAddr = []
                this.chooseAddr = []
            },
            // 重置省市區數據  實際數據與最終數據有出入  省前+0  市前+ 00   區前+ 000  最終數據需去掉
            initAddrList(provinces, cities, districts) {
                let _newArry = []            
                provinces.map(pro => {
                    _newArry.push({
                        name: pro.provinceName,
                        value: '0' + pro.id,
                        parent: null,
                        postcode: pro.postcode
                    })
                })
                cities.map(ci => {
                    _newArry.push({
                        name: ci.cityName,
                        value: '00' + ci.id,
                        parent: '0' + ci.provinceId,
                        postcode: ci.postcode
                    })
                })
                districts.map(dis => {
                    _newArry.push({
                        name: dis.districtName,
                        value: '000' + dis.id,
                        parent: '00' + dis.cityId,
                        postcode: dis.postcode
                    })
                })
                this.addressData = JSON.parse(JSON.stringify(_newArry))
            },
            // 從本地存儲/接口獲取地址數據
            getAddrList() {
                if (window.localStorage.getItem('ADDR_PRO')) {
                    this.ADDR_PRO = JSON.parse(window.localStorage.getItem('ADDR_PRO'))
                    this.ADDR_CI = JSON.parse(window.localStorage.getItem('ADDR_CI'))
                    this.ADDR_DIS = JSON.parse(window.localStorage.getItem('ADDR_DI'))
                    this.initAddrList(this.ADDR_PRO, this.ADDR_CI, this.ADDR_DIS)
                    return
                }
                // 調用接口，返回地址數據信息
                addrApi.getAddresses()
                .then((res)=>{
                    console.log(res)
                    if(res.data.code == 200) {
                        this.ADDR_PRO = res.data.content.provinces
                        this.ADDR_CI = res.data.content.cities
                        this.ADDR_DIS = res.data.content.districts
                        window.localStorage.setItem('ADDR_PRO', JSON.stringify(this.ADDR_PRO))
                        window.localStorage.setItem('ADDR_CI', JSON.stringify(this.ADDR_CI))
                        window.localStorage.setItem('ADDR_DI', JSON.stringify(this.ADDR_DIS))
                        this.initAddrList(res.data.content.provinces, res.data.content.cities, res.data.content.districts)
                    } else {
                        this.$Message.message(res.data.message)
                    }
                })
                .catch(err => {
                    console.log(err)
                })
            },
            // 顯示地址組件
            showAddr() {
                this.showAddress = true
            },
            // 獲取結果
            getChoose() {
                if(this.chooseAddr.length) {
                    this.resultAddr = []
                    let _arr = JSON.parse(JSON.stringify(this.chooseAddr))
                    _arr.map((item, idx) => {
                        this.resultAddr.push(item.substr(idx+1))
                    })
                    this.resultPostcode = this.ADDR_DIS.filter(item => item.id == this.resultAddr[2])[0].postcode
                    let addrPro = this.ADDR_PRO.filter(item => item.id == this.resultAddr[0])[0].provinceName
                    let addrCity = this.ADDR_CI.filter(item => item.id == this.resultAddr[1])[0].cityName
                    let addrDis = this.ADDR_DIS.filter(item => item.id == this.resultAddr[2])[0].districtName
                    let addrObj = {
                        province: addrPro,
                        city: addrCity,
                        district: addrDis,
                        postcode: this.resultPostcode
                    }
                    //⚠️ 點擊肯定輸出選中的數據信息--addrObj
                    this.$emit('getPostCode', addrObj)
                    if(this.clearAddrData) {
                        this.clearAddr()
                    }
                }
            }
        }
    }
</script>

地址組件css樣式更改 address.scss/address.css

⚠️ 使用地址組件的vue頁面須要在entry-js文件引入該樣式文件
assets/address/address.scss

.vux-cell-box{
    background: #20a3ff !important;
}
.vux-popup-dialog{
    background: #fff !important;
}
// 選擇頭部背景顏色
.vux-popup-header{
    background-color: #e8f6ff !important;
}
// 取消-完成按鈕顏色更改
.vux-popup-header-left, .vux-popup-header-right{
    color: #20a3ff !important;
}
// 選擇頭部底部border顏色更改
.vux-1px-b:after{
    border-color: transparent !important;
}


input::-webkit-input-placeholder { /* WebKit browsers */
    color:#999;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#999;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#999;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:#999;
}


textarea::-webkit-input-placeholder { /* WebKit browsers */
    color:#999;
}
textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#999;
}
textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#999;
}
textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:#999;
}

頁面調用地址組件

home.vue

<template>
  <div class="edit-address-wrapper">```
    <div class="eac-ipt-box" @click="$refs.pcaSel.showAddr()">選擇地址</div>
    <pca-sel :clearAddrData="true" ref="pcaSel" @getPostCode="getPostCode"></pca-sel>
  </div>
</template>
<script>
  import pcaSel from '@/components/address/pcaSelect'
  export default {
    components: { pcaSel },
    data() {
        return {}
    },
    methods: {
      // 獲取選擇地址結果
      getPostCode(val) {
        if(val) {
          this.addr = val.province + ' '+ val.city + ' ' + val.district
          this.province = val.province
          this.city = val.city
          this.region = val.district
          this.postcode = val.postcode
        }
      }
    }
  }
</script>

entry-> js

import '@/assets/address/address.scss';