收件地址

vuemint-ui实现省市区街道4级联动⽰例（仿淘宝京东收

货地址4级联动）

本⽂介绍了vuemint-ui实现省市区街道4级联动⽰例(仿淘宝京东收货地址4级联动)

先去下载⼀个“”四级联动数据，然后

引⼊

import{Picker}from'mint-ui';//前提是npminstallmint-ui-S

ent(,Picker);

组件使⽤

上门服务地址:{{addressProvince}}{{addressCity}}

组件⽅法

importsfrom'../../statics/mobile/json/'

exportdefault{

name:'address',

data(){

return{

companyName:'',

addressSlots:[

{

flex:1,

defaultIndex:1,

values:(s),

className:'slot1',

textAlign:'center'

},{

divider:true,

content:'-',

className:'slot2'

},{

flex:1,

values:[],

className:'slot3',

textAlign:'center'

},{

divider:true,

content:'-',

className:'slot4'

},{

flex:1,

values:[],

className:'slot5',

textAlign:'center'

}

],

streetSlots:[

{

flex:1,

values:[],

className:'slot1',

textAlign:'center'

}

],

addressProvince:'省',

addressCity:'市',

addressXian:'区',

addressStreet:'街道',

}

},

methods:{

onAddressChange(picker,values){

letsheng=(s);

letshi=(s[values[0]]);

letindex=f(values[1])

letxian=s[values[0]][shi[index]];

j=xian;

tValues(1,shi);

sProvince=values[0];

sCity=values[1];

sXian=values[2];

tValues(2,(xian));

},

onStreetChange(picker,values){

sStreet=values[0]

},

},

watch:{

'addressXian':{

handler(val,oval){

letstreet=j[sXian]

Slots[0].values=street

}

}

},

created(){

},

mounted(){

this.$nextTick(()=>{

tTimeout(()=>{//这个是⼀个初始化默认值的⼀个技巧

sSlots[0].defaultIndex=0;

},100);

});

}

}

完成效果

以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。