feat(prop): size

size?: 'large' | 'default' | 'small' = 'default'

Author: byronogis

README.md

@@ -38,6 +38,7 @@
 - clearIcon?: Component | null = CircleClose
 - disabledDate?: (date: Date) => boolean = () => false
 - teleported?: boolean = false
+- size?: 'large' | 'default' | 'small' = 'default'
 - style?: StyleValue = ''
 - *wantEnd?: boolean = false
 - *allowSame?: boolean = true

README_zhCN.md

@@ -38,6 +38,7 @@
 - clearIcon?: Component | null = CircleClose
 - disabledDate?: (date: Date) => boolean = () => false
 - teleported?: boolean = false
+- size?: 'large' | 'default' | 'small' = 'default'
 - style?: StyleValue = ''
 - *wantEnd?: boolean = false
 - *allowSame?: boolean = true

demo/App.vue

@@ -113,6 +113,27 @@ const yearrangeProps = reactive({
   wantEnd: true,
 })
 
+const yearrangeProps2 = reactive({
+  _title: 'yearrange-input-small',
+  type: 'yearrange',
+  modelValue: ['2020', '2025'],
+  disabledDate: disabledDateFn,
+  valueFormat: 'YYYY-MM-DD',
+  wantEnd: true,
+  size: 'small',
+})
+
+const yearrangeProps3 = reactive({
+  _title: 'yearrange-input-large',
+  type: 'yearrange',
+  modelValue: ['2020', '2025'],
+  disabledDate: disabledDateFn,
+  valueFormat: 'YYYY-MM-DD',
+  wantEnd: true,
+  size: 'large',
+})
+
+
 const items: any[] = [
   quarteryearProps,
   quarteryearProps2,
@@ -126,6 +147,8 @@ const items: any[] = [
   halfyearrangeProps2,
   halfyearrangeProps3,
   yearrangeProps,
+  yearrangeProps2,
+  yearrangeProps3,
 ]
 
 const DatePickerEnhancedRef = ref(null)

src/DatePickerEnhanced.vue

@@ -18,6 +18,8 @@ type DateType =
 
 type DateModelType = string | number | Date
 
+type Size = 'large' | 'default' | 'small'
+
 interface Props {
   type: DateType
   modelValue: DateModelType | [DateModelType, DateModelType]
@@ -37,6 +39,7 @@ interface Props {
   disabledDate?: (date: Date) => boolean
   cellClassName?: (date: Date) => string
   teleported?: boolean
+  size?: Size
 
   style?: StyleValue
 
@@ -59,6 +62,7 @@ const props = withDefaults(defineProps<Props>(), {
   clearIcon: CircleClose,
   disabledDate: () => false,
   teleported: false,
+  size: 'default',
   style: '',
   wantEnd: false,
   allowSame: true,
@@ -105,6 +109,7 @@ provide('style', props.style)
 provide('editable', props.editable)
 provide('readonly', props.readonly) // 以及面板容器
 provide('disabled', props.disabled) // 以及面板容器
+provide('size', props.size)
 
 type DatePickerRef = InstanceType<typeof DatePickerQuarterHalfYear> | InstanceType<typeof DatePickerQuarterHalfYearRange>
 const datepickerRef = ref<DatePickerRef | null>(null)

src/components/DatePickerInput.vue

@@ -19,6 +19,7 @@ const style = inject<StyleValue>('style')
 const editable = inject<boolean>('editable')
 const readonly = inject<boolean>('readonly')
 const disabled = inject<boolean>('disabled')
+const size = inject<boolean>('size')
 
 const value = computed(() => props.modelValue)
 
@@ -46,6 +47,7 @@ export default {
     class="el-input el-input--prefix el-input--suffix el-date-editor el-date-editor--month el-tooltip__trigger el-tooltip__trigger"
     :class="{
       'is-disabled': disabled,
+      [`el-input--${size}`]: true,
     }"
     :style="style"
     @mouseenter="isMouseIn = true"

src/components/DatePickerInputRange.vue

@@ -20,6 +20,7 @@ const style = inject<StyleValue>('style')
 const editable = inject<boolean>('editable')
 const readonly = inject<boolean>('readonly')
 const disabled = inject<boolean>('disabled')
+const size = inject<boolean>('size')
 
 const startValue = computed(() => props.modelValue[0])
 const endValue = computed(() => props.modelValue[1])
@@ -42,6 +43,7 @@ defineExpose({
     class="el-date-editor el-date-editor--monthrange el-input__wrapper el-range-editor el-tooltip__trigger el-tooltip__trigger"
     :class="{
       'is-disabled': disabled,
+      [`el-input--${size}`]: true,
     }"
     :style="style"
     @mouseenter="isMouseIn = true"