From c3d9cbfb1e6051f3688472d509ed78c2e653641e Mon Sep 17 00:00:00 2001 From: neverland Date: Wed, 25 Jan 2023 22:39:27 +0800 Subject: [PATCH] feat(Cascader): add useCascaderAreaData method (#11518) --- packages/vant-area-data/README.md | 16 ++++++-- packages/vant-area-data/package.json | 1 + packages/vant-area-data/src/index.ts | 56 +++++++++++++++++++++++++++- 3 files changed, 69 insertions(+), 4 deletions(-) diff --git a/packages/vant-area-data/README.md b/packages/vant-area-data/README.md index 60e57bdf7..2077240fb 100644 --- a/packages/vant-area-data/README.md +++ b/packages/vant-area-data/README.md @@ -1,6 +1,6 @@ -# Vant Area Data +# Vant China Area Data -中国省市区数据,适用于 Vant Area 组件。 +中国省市区数据,适用于 Vant 的 Area 和 Cascader 等组件。 ## 安装 @@ -17,10 +17,20 @@ pnpm add @vant/area-data ## 使用 +在 Vant 的 Area 组件中使用时,直接引用 `areaList` 对象即可: + ```ts import { areaList } from '@vant/area-data'; ``` +在 Vant 的 Cascader 组件中使用时,请使用 `useCascaderAreaData` 方法: + +```ts +import { useCascaderAreaData } from '@vant/area-data'; + +const cascaderAreaData = useCascaderAreaData(); +``` + ## 数据更新 -中国的行政区划每年都会有变动,如果发现省市区数据未及时更新,欢迎提 Pull Request 帮助我们更新。 +中国的行政区划每年都会有变动,如果发现省市区数据未及时更新,欢迎提 Pull Request 帮助我们更新。你可以在[「国家统计局 - 全国区划代码」](http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/) 和[「民政部 - 行政区划代码」](https://www.mca.gov.cn/article/sj/xzqh/1980/)上查询到最新数据,请根据官方数据进行核实。 diff --git a/packages/vant-area-data/package.json b/packages/vant-area-data/package.json index 4a1b76490..ea79164a6 100644 --- a/packages/vant-area-data/package.json +++ b/packages/vant-area-data/package.json @@ -11,6 +11,7 @@ "require": "./dist/index.cjs.js" } }, + "sideEffects": false, "files": [ "dist" ], diff --git a/packages/vant-area-data/src/index.ts b/packages/vant-area-data/src/index.ts index 4b4c5a895..5df0c20f8 100644 --- a/packages/vant-area-data/src/index.ts +++ b/packages/vant-area-data/src/index.ts @@ -1,4 +1,8 @@ -export const areaList = { +export const areaList: { + province_list: Record; + city_list: Record; + county_list: Record; +} = { province_list: { 110000: '北京市', 120000: '天津市', @@ -3886,3 +3890,53 @@ export const areaList = { 820204: '圣方济各堂区', }, }; + +type CascaderOption = { + text: string; + value: string; + children?: CascaderOption[]; +}; + +const makeOption = ( + text: string, + value: string, + children?: CascaderOption[] +): CascaderOption => ({ + text, + value, + children, +}); + +export function useCascaderAreaData() { + const { + city_list: city, + county_list: county, + province_list: province, + } = areaList; + + const provinceMap = new Map(); + Object.keys(province).forEach((code) => { + provinceMap.set(code.slice(0, 2), makeOption(province[code], code, [])); + }); + + const cityMap = new Map(); + + Object.keys(city).forEach((code) => { + const option = makeOption(city[code], code, []); + cityMap.set(code.slice(0, 4), option); + + const province = provinceMap.get(code.slice(0, 2)); + if (province) { + province.children!.push(option); + } + }); + + Object.keys(county).forEach((code) => { + const city = cityMap.get(code.slice(0, 4)); + if (city) { + city.children!.push(makeOption(county[code], code)); + } + }); + + return Array.from(provinceMap.values()); +}