小程序使用vantweappArea省市区选择组件使用详解

　　Area省市区选择组件
　　第一步 引入相关依赖
　　这个可以直接引用官网文档里面操作，由于需要用到popup组件，所以这里增加了对popup的引用＂usingComponents＂: {   ＂van-area＂: ＂@vant/weapp/area/index＂，   ＂van-popup＂: ＂@vant/weapp/popup/index＂ }
　　在需要的地方，插入组件           
　　定义依赖的变量，需要的变量，在下图中已经圈出来了。
　　Area省市区组件相关变量
　　这里解释下几个变量的作用：pickupAreaName:与van-field是绑定的，用于显示所选的省市区； pickupAreaCode:保存所选区的code，再次打开选择组件的时候，可以根据这个code，对选项 进行自动选取； pickupAreaSelector.pickupAreaName pickupAreaSelector.pickupAreaCode 这两个变量起到暂存的作用，打开组件之后，直到组件关闭之前，组件中选项的变动会实时更新到 这两个变量。 pickupAreaSelector.list 组件的数据源，具体解释见官网说明 list包含 province_list、city_list、county_list 三个 key。 每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两位代表省份，中间两位 代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 11，以 0 补足 6 位， 为 110000。第二步 实现底部弹层的显示与关闭
　　实现底部弹层的显示与关闭，主要是处理好如下几个事件
　　van-field相关：
　　bindtap --> 显示组件
　　van-popup相关：
　　bind:close --> 鼠标点击弹层以外的区域，关闭弹层
　　van-area相关：
　　bind:cancel --> 点弹层上的＂取消＂文字，关闭弹层
　　bind:change --> 选择省市区过程中，实时将选中的值，保存于变量中
　　bind:confirm --> 点弹层上的＂确认＂文字，关闭弹层，并将暂存变量中的值，赋值给外部变量
　　popup弹层上的取消和确认
　　详细实现代码如下// 选择区域   showPickupAreaSelector() {     this.setData({       ＂pickupAreaSelector.visible＂: true     })   },   hidePickupAreaSelector() {     this.setData({       ＂pickupAreaSelector.visible＂: false     })   },   changePickupAreaSelector(obj) {     let name = obj.detail.values[0].name + ＂-＂ + obj.detail.values[1].name + ＂-＂ + obj.detail.values[2].name     let pickupAreaName = name     let pickupAreaCode = obj.detail.values[2].code      this.setData({       ＂pickupAreaSelector.pickupAreaName＂: pickupAreaName,       ＂pickupAreaSelector.pickupAreaCode＂: pickupAreaCode     })   },   confirmPickupAreaSelector() {     let pickupAreaName = this.data.pickupAreaSelector.pickupAreaName     let pickupAreaCode = this.data.pickupAreaSelector.pickupAreaCode      this.hidePickupAreaSelector()     this.setData({       pickupAreaName: pickupAreaName,       pickupAreaCode: pickupAreaCode     })   },第三步 实现数据的数据双向绑定
　　这里双向绑定，主要是指：
　　1）打开组件选择省市区之后，选中的项，要显示在van-field里面；
　　2）van-field里面有之前选中的内容，再次打开后，之前选中的项，要在组件里面显示出俩，并使之处于被选中状态。
　　要达到这个效果，需要两个变量pickupAreaName和pickupAreaCode，pickupAreaName用于显示，比如＂上海市-上海市-嘉定区＂；pickupAreaCode用于保存code，比如＂100101＂，主要是为了方便后面的回显之前选中的值。
　　Area组件支持变量
　　其实，这个组件的使用不算难，主要是注意一些细节，考虑一些操作细节，需要花费一些心思。
　　喜欢我的分享的话，就关注我吧。我目前是一个自由职业者，我会持续分享IT技术相关，创业相关的心路历程，希望对大家有价值，与大家一起成长。