【Vue3+Vite+TS】4.0 组件三：省市区选择组件

必备UI组件

省市区选择组件将用到以下几个组件：
Select 选择器

组件设计

修改src\router\index.ts

/*
 * @Author: bobokaka
 * @Date: 2021-12-19 11:26:38
 * @LastEditTime: 2021-12-21 19:49:02
 * @LastEditors: bobokaka
 * @Description: 路由
 * @FilePath: \vue3-element-ui-baseline\src\router\index.ts
 */
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

import Home from '../views/Home/index.vue'
import Container from '../components/baseline/container/src/index.vue'

const routes: RouteRecordRaw[] = [
    {
        path: '/',
        component: Container,
        children: [
            {
                path: '/',
                component: Home,
            },
            {
                path: '/chooseIcon',
                component: () => import('../views/chooseIcon/index.vue'),
            },
            {
                path: '/chooseArea',
                component: () => import('../views/chooseArea/index.vue'),
            },
        ],
    },
]

const router = createRouter({
    routes,
    history: createWebHistory(),
})
export default router

新建src\views\chooseArea\index.vue

<template>
  <div><choose-area/></div>
</template>
<script  lang='ts' setup>
import ChooseArea from '../../components/baseline/chooseArea/src/index.vue'

</script >
<style lang='scss' scoped>

</style>

为了拿到省市区的数据，进入github。https://github.com/modood/Administrative-divisions-of-China

image.png

image.png

直接下载即可。

image.png

将该项目下\Administrative-divisions-of-China-master\dist\pca-code.json复制到项目src\components\baseline\chooseArea\lib\pca-code.json下。
可以看到其中数据结构如下：

image.png