优化 VanFieldPicker / VanFieldCalendar 组件

fantastic-mobile · Aug 13, 2024 · 2b0b65a · 2b0b65a
1 parent e1168d6
commit 2b0b65a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/src/components/VanFieldCalendar/index.vue b/src/components/VanFieldCalendar/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { CalendarProps, FieldProps } from 'vant'
+import { pick } from 'lodash-es'
 import dayjs from '@/utils/dayjs'
 
 defineOptions({
@@ -8,6 +9,7 @@ defineOptions({
 
 const props = withDefaults(
   defineProps<{
+    // field
     label?: FieldProps['label']
     name?: FieldProps['name']
     id?: FieldProps['id']
@@ -24,6 +26,7 @@ const props = withDefaults(
     leftIcon?: FieldProps['leftIcon']
     rightIcon?: FieldProps['rightIcon']
     rules?: FieldProps['rules']
+    // calendar
     color?: CalendarProps['color']
     minDate?: CalendarProps['minDate']
     maxDate?: CalendarProps['maxDate']
@@ -41,6 +44,9 @@ const props = withDefaults(
   },
 )
 
+const fieldProps = computed(() => pick(props, ['label', 'name', 'id', 'size', 'placeholder', 'border', 'colon', 'required', 'center', 'arrowDirection', 'labelClass', 'labelWidth', 'labelAlign', 'leftIcon', 'rightIcon', 'rules']))
+const calendarProps = computed(() => pick(props, ['color', 'minDate', 'maxDate', 'formatter', 'showConfirm', 'confirmText', 'firstDayOfWeek', 'round']))
+
 const value = defineModel<string>()
 const valueStr = computed(() => value.value && dayjs(value.value).format(props.format))
 const valueDate = computed(() => dayjs(value.value).toDate())
@@ -53,6 +59,6 @@ function onConfirm(date: Date) {
 </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="showCalendar = true" />
-  <van-calendar v-model:show="showCalendar" :color :min-date :max-date :default-date="valueDate" :formatter :show-confirm :confirm-text :first-day-of-week :round teleport="body" @confirm="onConfirm" />
+  <van-field :model-value="valueStr" v-bind="fieldProps" is-link readonly @click="showCalendar = true" />
+  <van-calendar v-model:show="showCalendar" v-bind="calendarProps" :default-date="valueDate" teleport="body" @confirm="onConfirm" />
 </template>
diff --git a/src/components/VanFieldPicker/index.vue b/src/components/VanFieldPicker/index.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import type { FieldProps, PickerOption, PopupProps } from 'vant'
+import { pick } from 'lodash-es'
 
 defineOptions({
   name: 'VanFieldPicker',
 })
 
 const props = defineProps<{
+  // field
   label?: FieldProps['label']
   name?: FieldProps['name']
   id?: FieldProps['id']
+  type?: FieldProps['type']
   size?: FieldProps['size']
   placeholder?: FieldProps['placeholder']
   border?: FieldProps['border']
@@ -19,13 +22,20 @@ const props = defineProps<{
   labelClass?: FieldProps['labelClass']
   labelWidth?: FieldProps['labelWidth']
   labelAlign?: FieldProps['labelAlign']
+  autosize?: FieldProps['autosize']
   leftIcon?: FieldProps['leftIcon']
   rightIcon?: FieldProps['rightIcon']
   rules?: FieldProps['rules']
+  // popup
   round?: PopupProps['round']
+  // picker
   columns?: PickerOption[]
 }>()
 
+const fieldProps = computed(() => pick(props, ['label', 'name', 'id', 'type', 'size', 'placeholder', 'border', 'colon', 'required', 'center', 'arrowDirection', 'labelClass', 'labelWidth', 'labelAlign', 'autosize', 'leftIcon', 'rightIcon', 'rules']))
+const popupProps = computed(() => pick(props, ['round']))
+const pickerProps = computed(() => pick(props, ['columns']))
+
 const value = defineModel<string | number>()
 const valuePicker = ref<any>([value.value])
 const valueStr = computed(() => props.columns?.find((item: any) => item.value === value.value)?.text)
@@ -34,8 +44,8 @@ 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-field :model-value="valueStr" v-bind="fieldProps" is-link readonly @click="showPicker = true" />
+  <van-popup v-model:show="showPicker" v-bind="popupProps" position="bottom" teleport="body">
+    <van-picker :model-value="valuePicker" v-bind="pickerProps" @confirm="({ selectedOptions }) => { value = selectedOptions[0]?.value; showPicker = false }" @cancel="showPicker = false" />
   </van-popup>
 </template>