小程序 封装 vant-area 地区选择器

areaPicker

利用vant 官方 提供的 areaList 省市数据包 特此记录下来

JS

import { areaList } from '../../miniprogram_npm/@vant/area-data/data';
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    areaList
  },
  ready(){
    // console.log('areaList',areaList)
  },
  /**
   * 组件的方法列表
   */
  methods: {
    chooseArea(e){
      let chooseAreaList = e.detail.values
      this.triggerEvent('chooseArea', chooseAreaList)
    },
    allChose(e){
      this.triggerEvent('allChose')
    }
  }
})

JSON

{
  "component": true,
  "usingComponents": {
    "van-area": "@vant/weapp/area/index"
  }
}

HTML

	<van-area area-list="{{ areaList }}" 
  	cancel-button-text="全部"
  	bind:cancel="allChose"
  	bind:confirm="chooseArea"
	/>

调用

<van-popup show="{{ areaPikerShow }}" 
    bind:close="onClose"
    position="bottom"
    custom-style="height:50%"
  >
    <areaPicker bind:chooseArea="chooseArea"  bind:allChose="allChose"/>
  </van-popup>

顺带附上写时遇到的坑 》》》

API

Vant3 Area 省市区选择_w3cschool