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

hookehuyr
Commit 1d599c2fd0491740dec17f38e4387cd643bd54e1 1d599c2f 1 parent 925f91e3
Showing 6 changed files with 42 additions and 4 deletions
package.json
src/components/AreaPickerField/index.vue
src/hooks/useComponentType.js
src/main.js
src/views/index.vue
yarn.lock
--- a/package.json
View file @1d599c2
+++ b/package.json
View file @1d599c2
@@ -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",
--- a/src/components/AreaPickerField/index.vue 0 → 100644
View file @1d599c2
+++ b/src/components/AreaPickerField/index.vue 0 → 100644
View file @1d599c2
+<!--
+ * @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>
--- a/src/hooks/useComponentType.js
View file @1d599c2
+++ b/src/hooks/useComponentType.js
View file @1d599c2
@@ -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;
+    }
   })
 }
--- a/src/main.js
View file @1d599c2
+++ b/src/main.js
View file @1d599c2
@@ -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');
--- a/src/views/index.vue
View file @1d599c2
+++ b/src/views/index.vue
View file @1d599c2
 <!--
  * @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)
--- a/yarn.lock
View file @1d599c2
+++ b/yarn.lock
View file @1d599c2
@@ -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"