使用方式

在 script 中引用组件

  1. import simpleAddress from "@/components/simple-address/simple-address.nvue"
  2. export default {
  3.     components: {
  4.         simpleAddress
  5.     },
  6.     data() {
  7.        return {
  8.          cityPickerValueDefault: [0, 0, 0],
  9.          pickerText: '',
  10.          form: {
  11.             province_id: '',
  12.             area_id: '',
  13.             city_id: '',
  14.           }
  15.        }
  16.     },
  17.     methods: {
  18.       // 弹出选择地区
  19.        openAddres() {
  20.           this.$refs.simpleAddress.open();
  21.         },
  22.        // 选择完得到省市区的 id
  23.         onConfirm(e) {
  24.           this.pickerText = e.label
  26.           this.form.province_id = e.provinceCode
  27.           this.form.city_id = e.cityCode
  28.           // e.provinceCode
  29.           // e.cityCode
  30.           // console.log(e.areaCode)
  31.           const vReg = /^1[1-2]/
  32.           if(vReg.test(e.areaCode)) {
  33.             let strArr = e.areaCode.split('')
  34.             strArr.splice(3,1,'2')
  35.             let str = strArr.join(''); 
  36.             this.form.area_id = str
  37.           } else {
  38.             this.form.area_id = e.areaCode
  39.           }
  40.         },
  41.     }
  42. }

在 template 中使用组件

  1. <view class="qui-cell" @tap="openAddres">
  2.   <view class="text-default fw600 w180">地区</view>
  3.   <view class="cell-bd flex">
  4.     {{pickerText}}
  5.   </view>
  6.   <view class="arrow-r"></view>
  7. </view>
  9. <!--这个放那里都行， 一般放在底部-->
  10. <simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" 
  11.                 @onConfirm="onConfirm" themeColor='#007AFF'></simple-address>