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