基于vue的三级联动地址选择组件（适用于移动端）

vux->XAddress

地址组件封装

components/address/pcaSelect.vue

地址组件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

entry-> js

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