✨ feat: 新增省市区组件模块

@@ -12,6 +12,7 @@
     "cypress:open": "cypress open"
   },
   "dependencies": {
+    "@vant/area-data": "^1.3.1",
     "@vitejs/plugin-legacy": "^1.8.2",
     "@vueuse/core": "^8.5.0",
     "animate.css": "^4.1.1",

+<!--
+ * @Date: 2022-08-30 14:32:11
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-08-30 14:46:53
+ * @FilePath: /data-table/src/components/AreaPickerField/index.vue
+ * @Description: 文件描述
+-->
+<template>
+  <div class="area-picker-field">
+    <van-area v-model="value" title="" :area-list="areaList" />
+  </div>
+</template>
+
+<script setup>
+import { areaList } from '@vant/area-data';
+const value = ref('330302');
+</script>
+
+<style lang="less" scoped>
+.area-picker-field {
+
+}
+</style>

@@ -5,6 +5,7 @@ import TextareaField from '@/components/TextareaField/index.vue'
 import RadioField from '@/components/RadioField/index.vue'
 import CheckboxField from '@/components/CheckboxField/index.vue'
 import PickerField from '@/components/PickerField/index.vue'
+import AreaPickerField from '@/components/AreaPickerField/index.vue'
 
 /**
  * 生成自定义组件类型
@@ -14,6 +15,7 @@ import PickerField from '@/components/PickerField/index.vue'
  * @type radio 单选框 RadioField
  * @type checkbox 多选框 CheckboxField
  * @type picker 单列选择器 PickerField
+ * @type area_picker 省市区选择器 AreaPickerField
  */
 export function createComponentType(data) {
   // 判断类型和使用组件
@@ -48,5 +50,8 @@ export function createComponentType(data) {
     if (item.component_type === 'picker') {
       item.component = PickerField;
     }
+    if (item.component_type === 'area_picker') {
+      item.component = AreaPickerField;
+    }
   })
 }

@@ -2,12 +2,12 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 12:06:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-08-30 13:21:07
+ * @LastEditTime: 2022-08-30 14:33:11
  * @FilePath: /data-table/src/main.js
  * @Description:
  */
 import { createApp } from 'vue';
-import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, NavBar, Collapse, CollapseItem, RadioGroup, Radio, CheckboxGroup } from 'vant';
+import { Button, Image as VanImage, Col, Row, Icon, Form, Field, CellGroup, ConfigProvider, Toast, Uploader, Empty, Tab, Tabs, Overlay, NumberKeyboard, Lazyload, List, PullRefresh, Popup, Picker, Sticky, Stepper, Tag, Swipe, SwipeItem, Dialog, ActionSheet, Loading, Checkbox, Search, NavBar, Collapse, CollapseItem, RadioGroup, Radio, CheckboxGroup, Area } from 'vant';
 import router from './router';
 import App from './App.vue';
 // import axios from './utils/axios';
@@ -23,6 +23,6 @@ app.config.warnHandler = () => null;
 
 app.config.globalProperties.$http = axios; // 关键语句
 
-app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(NavBar).use(Collapse).use(CollapseItem).use(Radio).use(RadioGroup).use(CheckboxGroup);
+app.use(pinia).use(router).use(Button).use(VanImage).use(Col).use(Row).use(Icon).use(Form).use(Field).use(CellGroup).use(Toast).use(Uploader).use(Empty).use(Tab).use(Tabs).use(Overlay).use(NumberKeyboard).use(Lazyload).use(List).use(PullRefresh).use(Popup).use(Picker).use(Sticky).use(Stepper).use(Tag).use(Swipe).use(SwipeItem).use(Dialog).use(ActionSheet).use(Loading).use(Checkbox).use(Search).use(ConfigProvider).use(NavBar).use(Collapse).use(CollapseItem).use(Radio).use(RadioGroup).use(CheckboxGroup).use(Area);
 
 app.mount('#app');

 <!--
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-08-30 14:23:18
+ * @LastEditTime: 2022-08-30 14:35:02
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
 -->
@@ -92,6 +92,10 @@ onMounted(() => {
       { text: '地铁', value: '地铁' },
     ],
     required: true,
+  }, {
+    key: 'city',
+    value: '',
+    component_type: 'area_picker'
   }];
   // 生成自定义组件
   createComponentType(mockData.value)

@@ -219,6 +219,11 @@
   resolved "https://mirrors.cloud.tencent.com/npm/@ungap%2fpromise-all-settled/-/promise-all-settled-1.1.2.tgz#aa58042711d6e3275dd37dc597e5d31e8c290a44"
   integrity sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==
 
+"@vant/area-data@^1.3.1":
+  version "1.3.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/@vant%2farea-data/-/area-data-1.3.1.tgz#07f4947aaa16d2c63e1447dc937d7567883f24aa"
+  integrity sha512-xji2kfVBXzFYmHAJNbhYjiRJ4GnN+enbTmtx6FnpTyxs9sUcFtS11BZ23hYCGuj4s02gXyrzUBTXGqhX5IKHIw==
+
 "@vant/icons@^1.8.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@vant/icons/-/icons-1.8.0.tgz#36b13f2e628b533f6523a93a168cf02f07056674"