基于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';