From 30e7bc9e6adbffffd248cdd73262178f98297686 Mon Sep 17 00:00:00 2001
From: Hooray Hu <304327508@qq.com>
Date: Wed, 31 Jul 2024 14:22:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=20VanFieldPicker=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/VanFieldPicker/index.vue   | 41 +++++++++++++++++++++++
 src/types/components.d.ts                 |  1 +
 src/types/typed-router.d.ts               |  1 +
 src/views/feature/component/composite.vue | 29 ++++++++++++++++
 src/views/feature/index.vue               |  1 +
 5 files changed, 73 insertions(+)
 create mode 100644 src/components/VanFieldPicker/index.vue
 create mode 100644 src/views/feature/component/composite.vue

diff --git a/src/components/VanFieldPicker/index.vue b/src/components/VanFieldPicker/index.vue
new file mode 100644
index 0000000..2749162
--- /dev/null
+++ b/src/components/VanFieldPicker/index.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { FieldProps, PickerOption, PickerProps, PopupProps } from 'vant'
+
+defineOptions({
+  name: 'VanFieldPicker',
+})
+
+const props = defineProps<{
+  label?: FieldProps['label']
+  name?: FieldProps['name']
+  id?: FieldProps['id']
+  size?: FieldProps['size']
+  placeholder?: FieldProps['placeholder']
+  border?: FieldProps['border']
+  colon?: FieldProps['colon']
+  required?: FieldProps['required']
+  center?: FieldProps['center']
+  arrowDirection?: FieldProps['arrowDirection']
+  labelClass?: FieldProps['labelClass']
+  labelWidth?: FieldProps['labelWidth']
+  labelAlign?: FieldProps['labelAlign']
+  leftIcon?: FieldProps['leftIcon']
+  rightIcon?: FieldProps['rightIcon']
+  rules?: FieldProps['rules']
+  round?: PopupProps['round']
+  columns?: PickerOption[]
+}>()
+
+const value = defineModel<string | number>()
+const valuePicker = ref<any>([value.value])
+const valueStr = computed(() => props.columns?.find((item: any) => item.value === value.value)?.text)
+
+const showPicker = ref(false)
+</script>
+
+<template>
+  <van-field :id :model-value="valueStr" :label :name :size :placeholder :border :colon :required :center :arrow-direction :label-class :label-width :label-align :left-icon :right-icon :rules is-link readonly @click="showPicker = true" />
+  <van-popup v-model:show="showPicker" :round position="bottom" teleport="body">
+    <van-picker :model-value="valuePicker" :columns @confirm="({ selectedOptions }) => { value = selectedOptions[0]?.value; showPicker = false }" @cancel="showPicker = false" />
+  </van-popup>
+</template>
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 69b21f0..3664321 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -24,5 +24,6 @@ declare module 'vue' {
     RouterView: typeof import('vue-router')['RouterView']
     SvgIcon: typeof import('./../components/SvgIcon/index.vue')['default']
     Trend: typeof import('./../components/Trend/index.vue')['default']
+    VanFieldPicker: typeof import('./../components/VanFieldPicker/index.vue')['default']
   }
 }
diff --git a/src/types/typed-router.d.ts b/src/types/typed-router.d.ts
index 019522e..2eb5af0 100644
--- a/src/types/typed-router.d.ts
+++ b/src/types/typed-router.d.ts
@@ -23,6 +23,7 @@ declare module 'vue-router/auto-routes' {
     '/feature/': RouteRecordInfo<'/feature/', '/feature', Record<never, never>, Record<never, never>>,
     '/feature/component/basic': RouteRecordInfo<'/feature/component/basic', '/feature/component/basic', Record<never, never>, Record<never, never>>,
     '/feature/component/built-in': RouteRecordInfo<'/feature/component/built-in', '/feature/component/built-in', Record<never, never>, Record<never, never>>,
+    '/feature/component/composite': RouteRecordInfo<'/feature/component/composite', '/feature/component/composite', Record<never, never>, Record<never, never>>,
     '/feature/component/pagemain-demo': RouteRecordInfo<'/feature/component/pagemain-demo', '/feature/component/pagemain-demo', Record<never, never>, Record<never, never>>,
     '/feature/component/trend-demo': RouteRecordInfo<'/feature/component/trend-demo', '/feature/component/trend-demo', Record<never, never>, Record<never, never>>,
     '/feature/function/icon': RouteRecordInfo<'/feature/function/icon', '/feature/function/icon', Record<never, never>, Record<never, never>>,
diff --git a/src/views/feature/component/composite.vue b/src/views/feature/component/composite.vue
new file mode 100644
index 0000000..dab4d54
--- /dev/null
+++ b/src/views/feature/component/composite.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+definePage({
+  meta: {
+    title: '复合组件',
+  },
+})
+
+const fieldPickerValue = ref('')
+const fieldPickerColumns = ref([
+  { text: '杭州', value: 'Hangzhou' },
+  { text: '宁波', value: 'Ningbo' },
+  { text: '温州', value: 'Wenzhou' },
+  { text: '绍兴', value: 'Shaoxing' },
+  { text: '湖州', value: 'Huzhou' },
+])
+</script>
+
+<template>
+  <PageLayout navbar navbar-start-side="back">
+    <PageMain>
+      Vant 提供的组件大多数比较原子化，在实际业务开发中，往往一个功能需要通过多个组件结合使用才能实现。本框架则将一些常用的功能封装成复合组件，方便开发者使用。
+    </PageMain>
+    <PageMain title="VanFieldPicker">
+      <van-field-picker v-model="fieldPickerValue" placeholder="请选择" :border="false" :columns="fieldPickerColumns" />
+      <van-divider />
+      选中值: {{ fieldPickerValue }}
+    </PageMain>
+  </PageLayout>
+</template>
diff --git a/src/views/feature/index.vue b/src/views/feature/index.vue
index a6f8792..d994617 100644
--- a/src/views/feature/index.vue
+++ b/src/views/feature/index.vue
@@ -59,6 +59,7 @@ const data: {
     icon: 'i-bx:bxs-component',
     routes: [
       { path: '/feature/component/basic', title: '基础组件' },
+      { path: '/feature/component/composite', title: '复合组件' },
     ],
   },
   {