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

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