基于Vant Picker组件轻松构建省市区选择器

2023-08-05 16:40:20

利用 Vant Picker 组件轻松构建省市区选择器

简介

省市区选择器是许多应用程序和网站的常见功能，它可以收集用户的地理信息，以便提供更个性化的服务或内容。Vant Picker 组件是一个功能强大的选择器，可以轻松集成到小程序中，帮助您快速构建省市区选择功能。本博客将以高德 gaode-area.json 为例，向您演示如何使用 Vant Picker 组件实现省市区选择功能。

获取高德 gaode-area.json 数据

高德 gaode-area.json 是一个包含了中国所有省、市、区数据的 JSON 文件。您可以从高德网站下载该文件。

转换数据格式

Vant Picker 组件需要特定的数据格式，因此我们需要将 gaode-area.json 文件中的数据转换成 Vant Picker 组件所需的格式。可以使用以下代码进行转换：

const parseGaodeAreaData = (data) => {
  const result = [];
  for (const provinceCode in data) {
    const province = data[provinceCode];
    result.push({
      label: province.name,
      value: provinceCode,
      children: province.children.map((city) => {
        return {
          label: city.name,
          value: city.code,
          children: city.children.map((district) => {
            return {
              label: district.name,
              value: district.code,
            };
          }),
        };
      }),
    });
  }
  return result;
};

使用 Vant Picker 组件

在小程序中使用 Vant Picker 组件实现省市区选择功能，需要遵循以下步骤：

在小程序中引入 Vant Picker 组件：

import { VanPicker } from 'vant';
Vue.use(VanPicker);

在小程序页面中声明 Vant Picker 组件：

<van-picker 
  columns="{{ columns }}"
  value="{{ value }}"
  bind:change="onPickerChange"

监听 Vant Picker 组件的 change 事件：

onPickerChange(e) {
  this.setData({
    value: e.detail.value,
  });
},

示例代码

以下是一个使用 Vant Picker 组件实现省市区选择功能的示例代码：

<template>
  <van-picker 
    columns="{{ columns }}"
    value="{{ value }}"
    bind:change="onPickerChange"
  />
</template>

<script>
import { parseGaodeAreaData } from './parseGaodeAreaData';

export default {
  data() {
    return {
      columns: parseGaodeAreaData(gaodeAreaData),
      value: [0, 0, 0],
    };
  },

  methods: {
    onPickerChange(e) {
      this.setData({
        value: e.detail.value,
      });
    },
  },
};
</script>