当前位置：首页 > article >正文

微信小程序-基于Vant Weapp UI 组件库的Area 省市区选择

article 2024/12/26 14:38:46

Area 省市区选择，省市区选择组件通常与弹出层组件配合使用。
areaList 格式
areaList 为对象结构，包含 province_list、city_list、county_list 三个 key。

每项以地区码作为 key，省市区名字作为 value。地区码为 6 位数字，前两位代表省份，中间两位代表城市，后两位代表区县，以 0 补足 6 位。比如北京的地区码为 11，以 0 补足 6 位，为 110000。

Vant 官方提供了一份默认的省市区数据，可以通过 @vant/area-data 引入。

1. 省市区数据引入

npm i @vant/area-data

安装后，使用@vant下面的路径无法引用成功
在这里插入图片描述
我们新建一个用来引入文件的文件夹node_Files，放在pages下面，把@vant中的 area-data 整个进行拷贝，把dist里面的index.cjs.js文件名改为data.js，index.d.ts文件名改为data.d.ts。

引入链接

//省市区数据引入使用
import {
  areaList
} from "../../pages/node_Files/area-data/dist/data";

2. 封装组件

在这里插入图片描述
address-option.wxml

<!--components/address-option.wxml-->
<van-field value="{{ fieldValue }}" readonly clearable input-align="{{inputAlign}}" label="{{label}}" placeholder="请选择地区" bind:tap="onClick" required is-link />
<van-action-sheet show="{{ show }}">
    <van-area area-list="{{ areaList }}" title="地区选择" bind:confirm="onConfirm" bind:cancel="onClose" />
</van-action-sheet>

addressOption.js

// components/addressOption/addressOption.js
//省市区数据引入使用
import {
  areaList
} from "../../pages/node_Files/area-data/dist/data";

Component({
  /**
   * 组件的属性列表
   */
  properties: {
      label: {
        type: String,
        value: "地区"
      },
      inputAlign: {
        type: String,
        value: "left"
      },
      optionValue: {
          type: String,
          value: ""
      },
      mustFillIn: {
          type: String,
          value: false
      }
  },

  /**
   * 组件的初始数据
   */
  data: {
      areaList,
      show:false
  },

  /**
   * 组件的方法列表
   */
  methods: {
      onClick() {
          this.setData({
              show: true,
          });
      },

      onConfirm(e){
          console.log("确定省市区：",e)
          var address=""
          e.detail.values.forEach(element => {
              address=address+element.name
          });
          this.setData({
              address: address,
              show: false,
          })
          this.handleTap()
          console.log("省市区为：",address)
          
      },

      handleTap() {
          let value = this.data.address
          console.log("fieldValue 地址：", value)
          this.triggerEvent("addressTab", value)
      },

      onClose() {
          this.setData({
              show: false,
          });
      },

  },
  observers: {
      optionValue: function (e) {
          this.setData({
              fieldValue: e
          })
      }
  },
})

address-option.json

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

3. 页面使用省市区

3.1. 引入组件

address.json

"usingComponents": {
    "address-option": "/components/address-option/address-option"
  }

3.2. 调用组件

address.wxml

<address-option bind:addressTab="onAddress"></address-option>

3.3. 接收子组件传过来的值

address.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    radio: '1',
    fieldValue: ""
  },

  onAddress(e){
    this.setData({
      fieldValue: e.detail
    })
  },
})