hy-app 0.2.13 → 0.2.15

package/components/hy-datetime-picker/hy-datetime-picker.vue

@@ -1,10 +1,6 @@
 <template>
-  <view class="u-datetime-picker">
-    <view
-      v-if="hasInput"
-      class="u-datetime-picker__has-input"
-      @click="onShowByClickInput"
-    >
+  <view :class="['hy-datetime-picker', customClass]" :style="customStyle">
+    <view v-if="hasInput" class="hy-datetime-picker__has-input" @click="onShowByClickInput">
       <slot name="trigger" :value="inputValue">
         <HyInput
           v-model="inputValue"
@@ -21,9 +17,7 @@
           :placeholder="input?.placeholder || '请选择时间'"
           :placeholderStyle="input?.placeholderStyle"
           :placeholderClass="input?.placeholderClass"
-          :customStyle="
-            Object.assign({ 'pointer-events': 'none' }, input?.customStyle)
-          "
+          :customStyle="Object.assign({ 'pointer-events': 'none' }, input?.customStyle)"
         ></HyInput>
         <view class="input-cover"></view>
       </slot>
@@ -55,35 +49,177 @@
         </slot>
       </template>
       <template #toolbar-bottom>
-        <slot name="toolbar-bottom"> </slot>
+        <slot name="toolbar-bottom"></slot>
       </template>
     </HyPicker>
   </view>
 </template>
 
 <script lang="ts">
+/**
+ * 此选择器用于时间日期选择
+ * @displayName hy-datetime-picker
+ */
+defineOptions({})
 export default {
   name: 'hy-datetime-picker',
   options: {
     addGlobalClass: true,
     virtualHost: true,
-    styleIsolation: 'shared'
-  }
+    styleIsolation: 'shared',
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, toRefs, watch } from "vue";
-import defaultProps from "./props";
-import type IProps from "./typing";
-import dayjs from "dayjs/esm";
-import { error, padZero } from "../../utils";
-import { DateModeEnum } from "../../typing";
+import { computed, onMounted, ref, toRefs, watch } from 'vue'
+import type { CSSProperties, PropType } from 'vue'
+import dayjs from 'dayjs/esm'
+import { error, padZero } from '../../utils'
+import { DateModeEnum } from '../../typing'
+import type HyInputProps from '../hy-input/typing'
+
 // 组件
-import HyInput from "../hy-input/hy-input.vue";
-import HyPicker from "../hy-picker/hy-picker.vue";
+import HyInput from '../hy-input/hy-input.vue'
+import HyPicker from '../hy-picker/hy-picker.vue'
+import { IDatetimePickerEmits } from '@/package/components/hy-datetime-picker/typing'
 
-const props = withDefaults(defineProps<IProps>(), defaultProps);
+// const props = withDefaults(defineProps<IProps>(), defaultProps)
+const props = defineProps({
+  /** 用于控制选择器的弹出和收起 */
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+   * 弹出层弹出方向
+   * @values bottom,top
+   * */
+  popupMode: {
+    type: String,
+    default: 'bottom',
+  },
+  /** 是否显示顶部的操作栏 */
+  showToolbar: {
+    type: Boolean,
+    default: true,
+  },
+  /** 绑定值 */
+  modelValue: [String, Number, Date],
+  /** 顶部标题 */
+  title: String,
+  /**
+   * 展示格式 mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择
+   * @values date,time,year-month,datetime
+   * */
+  mode: {
+    type: String,
+    default: DateModeEnum.DATETIME,
+  },
+  /** 可选的最大时间  默认值为后10年 */
+  maxDate: {
+    type: Number,
+    default: new Date(new Date().getFullYear() + 10, 0, 1).getTime(),
+  },
+  /** 可选的最小时间  默认值为前10年 */
+  minDate: {
+    type: Number,
+    default: new Date(new Date().getFullYear() - 10, 0, 1).getTime(),
+  },
+  /** 可选的最小小时，仅mode=time有效 */
+  minHour: {
+    type: Number,
+    default: 0,
+  },
+  /** 可选的最大小时，仅mode=time有效 */
+  maxHour: {
+    type: Number,
+    default: 23,
+  },
+  /** 可选的最小分钟，仅mode=time有效 */
+  minMinute: {
+    type: Number,
+    default: 0,
+  },
+  /** 可选的最大分钟，仅mode=time有效 */
+  maxMinute: {
+    type: Number,
+    default: 59,
+  },
+  /** 选项过滤函数 */
+  filter: Function,
+  /** 选项格式化函数 */
+  formatter: Function,
+  /** 是否显示加载中状态 */
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  /** 各列中，单个选项的高度 */
+  itemHeight: {
+    type: Number,
+    default: 44,
+  },
+  /** 取消按钮的文字 */
+  cancelText: {
+    type: String,
+    default: '取消',
+  },
+  /** 确认按钮的文字 */
+  confirmText: {
+    type: String,
+    default: '确认',
+  },
+  /** 取消按钮的颜色 */
+  cancelColor: {
+    type: String,
+    default: '#909193',
+  },
+  /** 确认按钮的颜色 */
+  confirmColor: {
+    type: String,
+    default: '#3c9cff',
+  },
+  /** 每列中可见选项的数量 */
+  visibleItemCount: {
+    type: Number,
+    default: 5,
+  },
+  /** 是否允许点击遮罩关闭选择器 */
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: false,
+  },
+  /** 各列的默认索引 */
+  defaultIndex: {
+    type: Array,
+    default() {
+      return []
+    },
+  },
+  /** 输入框是否显示边框 */
+  hasInput: {
+    type: Boolean,
+    default: false,
+  },
+  /** 输入框集合属性 */
+  input: {
+    type: Object as unknown as PropType<HyInputProps>,
+  },
+  /** 自定义时间格式 */
+  format: String,
+  /** 右边插槽 */
+  toolbarRightSlot: {
+    type: Boolean,
+    default: false,
+  },
+  /** 定义需要用到的外部样式 */
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+  },
+  /** 自定义外部类名 */
+  customClass: String,
+})
 const {
   show,
   modelValue,
@@ -100,75 +236,69 @@ const {
   maxHour,
   minMinute,
   maxMinute,
-} = toRefs(props);
-const emit = defineEmits([
-  "close",
-  "cancel",
-  "confirm",
-  "change",
-  "update:modelValue",
-]);
+} = toRefs(props)
+const emit = defineEmits<IDatetimePickerEmits>()
 
 // 原来的日期选择器不方便，这里增加一个hasInput选项支持类似element的自带输入框的功能。
-const inputValue = ref<string | number>(""); // 表单显示值
-const innerValue = ref<string | number>(""); // 表单显示值
-const showByClickInput = ref<boolean>(false); // 是否在hasInput模式下显示日期选择弹唱
-const columns = ref<any[]>([]);
-const innerDefaultIndex = ref<number[]>([]);
-let innerFormatter = (type: any, value: any) => value;
+const inputValue = ref<string | number>('') // 表单显示值
+const innerValue = ref<string | number>('') // 表单显示值
+const showByClickInput = ref<boolean>(false) // 是否在hasInput模式下显示日期选择弹唱
+const columns = ref<any[]>([])
+const innerDefaultIndex = ref<number[]>([])
+let innerFormatter = (type: any, value: any) => value
 const validModes = new Set([
   DateModeEnum.TIME,
   DateModeEnum.MONTH_DAY,
   DateModeEnum.HOUR_MINUTE,
   DateModeEnum.MINUTE_SECOND,
-]);
+])
 
 /**
  * @description 更新各列的值
  * */
 const updateColumns = () => {
-  const formatterFn = formatter.value || innerFormatter;
+  const formatterFn = formatter.value || innerFormatter
   // 获取各列的值，并且map后，对各列的具体值进行补0操作
   columns.value = getOriginColumns().map((column) =>
     column.values.map((value) => formatterFn(column.type, value)),
-  );
-};
+  )
+}
 
 /**
  * @description 更新各列的值，进行补0、格式化等操作
  * */
 const updateColumnValue = (value: string | number) => {
-  innerValue.value = value;
-  updateColumns();
+  innerValue.value = value
+  updateColumns()
   // 延迟执行,等待u-picker组件列数据更新完后再设置选中值索引
   setTimeout(() => {
-    updateIndexes(value);
-  }, 100);
-};
+    updateIndexes(value)
+  }, 100)
+}
 
 const init = () => {
   // 获取当前值
-  innerValue.value = correctValue(modelValue.value);
+  innerValue.value = correctValue(modelValue.value)
   // 更新列表
-  updateColumnValue(innerValue.value);
+  updateColumnValue(innerValue.value)
 
   // 初始化hasInput展示
-  getInputValue(innerValue.value);
-};
+  getInputValue(innerValue.value)
+}
 
 watch(
   () => show.value,
   (newValue) => {
     if (newValue) {
-      updateColumnValue(innerValue.value);
+      updateColumnValue(innerValue.value)
     }
   },
-);
+)
 
 watch(
   () => modelValue.value,
   () => init(),
-);
+)
 
 const propsChange = computed(() => {
   return [
@@ -180,66 +310,64 @@ const propsChange = computed(() => {
     minMinute.value,
     maxMinute.value,
     filter.value,
-  ];
-});
+  ]
+})
 
 watch(
   () => propsChange.value,
   () => init(),
-);
+)
 
 onMounted(() => {
-  init();
-});
+  init()
+})
 
 const getInputValue = (newValue: string | number) => {
-  if (newValue == "" || !newValue) {
-    inputValue.value = "";
-    return;
+  if (newValue == '' || !newValue) {
+    inputValue.value = ''
+    return
   }
-  if (mode.value === "time") {
-    inputValue.value = newValue;
+  if (mode.value === 'time') {
+    inputValue.value = newValue
   } else {
     if (format.value) {
-      inputValue.value = dayjs(newValue).format(format.value);
+      inputValue.value = dayjs(newValue).format(format.value)
     } else {
-      let format = "";
+      let format = ''
       switch (mode.value) {
         case DateModeEnum.DATE:
-          format = "YYYY-MM-DD";
-          break;
+          format = 'YYYY-MM-DD'
+          break
         case DateModeEnum.YEAR_MONTH:
-          format = "YYYY-MM";
-          break;
+          format = 'YYYY-MM'
+          break
         case DateModeEnum.DATETIME:
-          format = "YYYY-MM-DD HH:mm:ss";
-          break;
+          format = 'YYYY-MM-DD HH:mm:ss'
+          break
         case DateModeEnum.MONTH_DAY:
-          format = "MM-DD";
-          break;
+          format = 'MM-DD'
+          break
         case DateModeEnum.HOUR_MINUTE:
-          format = "HH:mm";
-          break;
+          format = 'HH:mm'
+          break
         case DateModeEnum.MINUTE_SECOND:
-          format = "mm:ss";
-          break;
+          format = 'mm:ss'
+          break
         default:
-          break;
+          break
       }
-      inputValue.value = dayjs(newValue).isValid()
-        ? dayjs(newValue).format(format)
-        : newValue;
+      inputValue.value = dayjs(newValue).isValid() ? dayjs(newValue).format(format) : newValue
     }
   }
-};
+}
 const times = (n: number, iteratee: Function) => {
-  let index = -1;
-  const result = Array(n < 0 ? 0 : n);
+  let index = -1
+  const result = Array(n < 0 ? 0 : n)
   while (++index < n) {
-    result[index] = iteratee(index);
+    result[index] = iteratee(index)
   }
-  return result;
-};
+  return result
+}
 
 /**
  * @description 关闭选择器
@@ -247,169 +375,153 @@ const times = (n: number, iteratee: Function) => {
 const close = () => {
   if (closeOnClickOverlay.value) {
     if (hasInput.value) {
-      showByClickInput.value = false;
+      showByClickInput.value = false
     }
-    emit("close");
+    emit('close')
   }
-};
+}
 
 /**
  * @description 点击工具栏的取消按钮
  * */
 const cancel = () => {
   if (hasInput.value) {
-    showByClickInput.value = false;
+    showByClickInput.value = false
   }
-  emit("cancel");
-};
+  emit('cancel')
+}
 
 /**
  * @description 点击工具栏的确定按钮
  * */
 const confirm = () => {
-  emit("update:modelValue", innerValue.value);
+  emit('update:modelValue', innerValue.value)
   if (hasInput.value) {
-    getInputValue(innerValue.value);
-    showByClickInput.value = false;
+    getInputValue(innerValue.value)
+    showByClickInput.value = false
   }
-  emit("confirm", {
+  emit('confirm', {
     value: innerValue.value,
     mode: mode.value,
-  });
-};
+  })
+}
 
 /**
  * @description 用正则截取输出值,当出现多组数字时,抛出错误
  * */
 const intercept = (e: any, type?: string) => {
-  let judge = e.match(/\d+/g);
+  let judge = e.match(/\d+/g)
   //判断是否掺杂数字
   if (judge.length > 1) {
-    error("请勿在过滤或格式化函数时添加数字");
-    return 0;
+    error('请勿在过滤或格式化函数时添加数字')
+    return 0
   } else if (type && judge[0].length == 4) {
     //判断是否是年份
-    return judge[0];
+    return judge[0]
   } else if (judge[0].length > 2) {
-    error("请勿在过滤或格式化函数时添加数字");
-    return 0;
+    error('请勿在过滤或格式化函数时添加数字')
+    return 0
   } else {
-    return judge[0];
+    return judge[0]
   }
-};
+}
 
 /**
  * @description 列发生变化时触发
  * */
 const change = (e: any) => {
-  const { indexs, values } = e;
-  let selectValue: string | number = "";
+  const { indexs, values } = e
+  let selectValue: string | number = ''
   if (validModes.has(mode.value) && mode.value !== DateModeEnum.MONTH_DAY) {
     // 根据value各列索引，从各列数组中，取出当前时间的选中值
-    selectValue = `${intercept(values[0][indexs[0]])}:${intercept(
-      values[1][indexs[1]],
-    )}`;
+    selectValue = `${intercept(values[0][indexs[0]])}:${intercept(values[1][indexs[1]])}`
   } else if (mode.value === DateModeEnum.MONTH_DAY) {
     // 根据value各列索引，从各列数组中，取出当前时间的选中值
-    selectValue = `${intercept(values[0][indexs[0]])}-${intercept(
-      values[1][indexs[1]],
-    )}`;
+    selectValue = `${intercept(values[0][indexs[0]])}-${intercept(values[1][indexs[1]])}`
   } else {
     // 将选择的值转为数值，比如'03'转为数值的3，'2019'转为数值的2019
-    const year = parseInt(intercept(values[0][indexs[0]], "year"));
-    const month = parseInt(intercept(values[1][indexs[1]]));
-    let date = parseInt(values[2] ? intercept(values[2][indexs[2]]) : 1);
+    const year = parseInt(intercept(values[0][indexs[0]], 'year'))
+    const month = parseInt(intercept(values[1][indexs[1]]))
+    let date = parseInt(values[2] ? intercept(values[2][indexs[2]]) : 1)
     let hour = 0,
       minute = 0,
-      second = 0;
+      second = 0
     // 此月份的最大天数
-    const maxDate = dayjs(`${year}-${month}`).daysInMonth();
+    const maxDate = dayjs(`${year}-${month}`).daysInMonth()
     // 不允许超过maxDate值
-    date = Math.min(maxDate, date);
+    date = Math.min(maxDate, date)
     if (mode.value === DateModeEnum.DATETIME) {
-      hour = parseInt(intercept(values[3][indexs[3]]));
-      minute = parseInt(intercept(values[4][indexs[4]]));
-      second = parseInt(intercept(values[5][indexs[5]]));
+      hour = parseInt(intercept(values[3][indexs[3]]))
+      minute = parseInt(intercept(values[4][indexs[4]]))
+      second = parseInt(intercept(values[5][indexs[5]]))
     }
     // 转为时间模式
-    selectValue = Number(new Date(year, month - 1, date, hour, minute, second));
+    selectValue = Number(new Date(year, month - 1, date, hour, minute, second))
   }
   // 取出准确的合法值，防止超越边界的情况
-  selectValue = correctValue(selectValue);
-  innerValue.value = selectValue;
-  updateColumnValue(selectValue);
+  selectValue = correctValue(selectValue)
+  innerValue.value = selectValue
+  updateColumnValue(selectValue)
   // 发出change时间，value为当前选中的时间戳
-  emit("change", {
+  emit('change', {
     value: selectValue,
     // #ifndef MP-WEIXIN
     // 微信小程序不能传递this实例，会因为循环引用而报错
     // picker: this.$refs.picker,
     // #endif
     mode: mode.value,
-  });
-};
+  })
+}
 
 /**
  * @description 更新索引
  * */
 const updateIndexes = (value: number | string) => {
-  let values: string[] = [];
-  let timeArr: string[] = [];
-  const formatterFn = formatter.value || innerFormatter;
+  let values: string[] = []
+  let timeArr: string[] = []
+  const formatterFn = formatter.value || innerFormatter
 
   switch (mode.value) {
     case DateModeEnum.TIME:
-      timeArr = value.toString().split(":");
+      timeArr = value.toString().split(':')
       // 使用formatter格式化方法进行管道处理
-      values = [
-        formatterFn("hour", timeArr[0]),
-        formatterFn("minute", timeArr[1]),
-      ];
-      break;
+      values = [formatterFn('hour', timeArr[0]), formatterFn('minute', timeArr[1])]
+      break
     case DateModeEnum.MONTH_DAY:
-      timeArr = value.toString().split("-");
+      timeArr = value.toString().split('-')
       // 使用formatter格式化方法进行管道处理
-      values = [
-        formatterFn("month", timeArr[0]),
-        formatterFn("day", timeArr[1]),
-      ];
-      break;
+      values = [formatterFn('month', timeArr[0]), formatterFn('day', timeArr[1])]
+      break
     case DateModeEnum.HOUR_MINUTE:
-      timeArr = value.toString().split(":");
+      timeArr = value.toString().split(':')
       // 使用formatter格式化方法进行管道处理
-      values = [
-        formatterFn("hour", timeArr[0]),
-        formatterFn("minute", timeArr[1]),
-      ];
-      break;
+      values = [formatterFn('hour', timeArr[0]), formatterFn('minute', timeArr[1])]
+      break
     case DateModeEnum.MINUTE_SECOND:
-      timeArr = value.toString().split(":");
+      timeArr = value.toString().split(':')
       // 使用formatter格式化方法进行管道处理
-      values = [
-        formatterFn("minute", timeArr[0]),
-        formatterFn("second", timeArr[1]),
-      ];
-      break;
+      values = [formatterFn('minute', timeArr[0]), formatterFn('second', timeArr[1])]
+      break
     default:
       values = [
-        formatterFn("year", `${dayjs(value).year()}`),
+        formatterFn('year', `${dayjs(value).year()}`),
         // 月份补0
-        formatterFn("month", padZero(dayjs(value).month() + 1)),
-      ];
+        formatterFn('month', padZero(dayjs(value).month() + 1)),
+      ]
       if (mode.value === DateModeEnum.DATE) {
         // date模式，需要添加天列
-        values.push(formatterFn("day", padZero(dayjs(value).date())));
+        values.push(formatterFn('day', padZero(dayjs(value).date())))
       }
       if (mode.value === DateModeEnum.DATETIME) {
         // 数组的push方法，可以写入多个参数
         values.push(
-          formatterFn("day", padZero(dayjs(value).date())),
-          formatterFn("hour", padZero(dayjs(value).hour())),
-          formatterFn("minute", padZero(dayjs(value).minute())),
-          formatterFn("second", padZero(dayjs(value).second())),
-        );
+          formatterFn('day', padZero(dayjs(value).date())),
+          formatterFn('hour', padZero(dayjs(value).hour())),
+          formatterFn('minute', padZero(dayjs(value).minute())),
+          formatterFn('second', padZero(dayjs(value).second())),
+        )
       }
-      break;
+      break
   }
   // 根据当前各列的所有值，从各列默认值中找到默认值在各列中的索引
   innerDefaultIndex.value = columns.value.map((column, index) => {
@@ -417,9 +529,9 @@ const updateIndexes = (value: number | string) => {
     return Math.max(
       0,
       column.findIndex((item: string) => item === values[index]),
-    );
-  });
-};
+    )
+  })
+}
 
 /**
  * @description 获取每列数据
@@ -428,41 +540,41 @@ const getOriginColumns = () => {
   // 生成各列的值
   return getRanges().map(({ type, range }) => {
     let values = times(range[1] - range[0] + 1, (index: number) => {
-      let value: string | number = range[0] + index;
-      value = type === "year" ? `${value}` : padZero(value);
-      return value;
-    });
+      let value: string | number = range[0] + index
+      value = type === 'year' ? `${value}` : padZero(value)
+      return value
+    })
     // 进行过滤
     if (filter.value) {
-      values = filter.value(type, values);
+      values = filter.value(type, values)
       if (!values || (values && values.length == 0)) {
-        error("日期filter结果不能为空");
+        error('日期filter结果不能为空')
       }
     }
-    return { type, values };
-  });
-};
+    return { type, values }
+  })
+}
 
 /**
  * @description 得出合法的时间
  * */
 const correctValue = (value: number | string | Date): string | number => {
-  const isDateMode = mode.value !== DateModeEnum.TIME;
+  const isDateMode = mode.value !== DateModeEnum.TIME
   // if (isDateMode && !test.date(value)) {
   if (!isDateMode && !value) {
     // 如果是时间类型，而又没有默认值的话，就用最小时间
-    value = `${padZero(minHour.value)}:${padZero(minMinute.value)}`;
+    value = `${padZero(minHour.value)}:${padZero(minMinute.value)}`
   }
   // 时间类型
   if (validModes.has(mode.value)) {
-    return value as string;
+    return value as string
   } else {
     // 如果是日期格式，控制在最小日期和最大日期之间
-    value = dayjs(value).isBefore(dayjs(minDate.value)) ? minDate.value : value;
-    value = dayjs(value).isAfter(dayjs(maxDate.value)) ? maxDate.value : value;
-    return value as string | number;
+    value = dayjs(value).isBefore(dayjs(minDate.value)) ? minDate.value : value
+    value = dayjs(value).isAfter(dayjs(maxDate.value)) ? maxDate.value : value
+    return value as string | number
   }
-};
+}
 /**
  * @description 获取每列的最大和最小值
  * */
@@ -470,85 +582,79 @@ const getRanges = () => {
   if (mode.value === DateModeEnum.TIME) {
     return [
       {
-        type: "hour",
+        type: 'hour',
         range: [props.minHour, props.maxHour],
       },
       {
-        type: "minute",
+        type: 'minute',
         range: [props.minMinute, props.maxMinute],
       },
-    ];
+    ]
   }
-  const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = getBoundary(
-    "max",
-    innerValue.value,
-  );
-  const { minYear, minDate, minMonth, minHour, minMinute } = getBoundary(
-    "min",
-    innerValue.value,
-  );
+  const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = getBoundary('max', innerValue.value)
+  const { minYear, minDate, minMonth, minHour, minMinute } = getBoundary('min', innerValue.value)
   const result = [
     {
-      type: "year",
+      type: 'year',
       range: [minYear, maxYear],
     },
     {
-      type: "month",
+      type: 'month',
       range: [minMonth, maxMonth],
     },
     {
-      type: "day",
+      type: 'day',
       range: [minDate, maxDate],
     },
     {
-      type: "hour",
+      type: 'hour',
       range: [minHour, maxHour],
     },
     {
-      type: "minute",
+      type: 'minute',
       range: [minMinute, maxMinute],
     },
     {
-      type: "second",
+      type: 'second',
       range: [minMinute, maxMinute],
     },
-  ];
-  let arr = result;
+  ]
+  let arr = result
   // 截取对应的列数
-  if (mode.value === DateModeEnum.DATE) arr = result.splice(0, 3);
-  if (mode.value === DateModeEnum.YEAR_MONTH) arr = result.splice(0, 2);
-  if (mode.value === DateModeEnum.MONTH_DAY) arr = result.splice(1, 2);
-  if (mode.value === DateModeEnum.HOUR_MINUTE) arr = result.splice(3, 2);
-  if (mode.value === DateModeEnum.MINUTE_SECOND) arr = result.splice(4, 2);
-  return arr;
-};
+  if (mode.value === DateModeEnum.DATE) arr = result.splice(0, 3)
+  if (mode.value === DateModeEnum.YEAR_MONTH) arr = result.splice(0, 2)
+  if (mode.value === DateModeEnum.MONTH_DAY) arr = result.splice(1, 2)
+  if (mode.value === DateModeEnum.HOUR_MINUTE) arr = result.splice(3, 2)
+  if (mode.value === DateModeEnum.MINUTE_SECOND) arr = result.splice(4, 2)
+  return arr
+}
 /**
  * @description 根据minDate、maxDate、minHour、maxHour等边界值，判断各列的开始和结束边界值
  * */
 const getBoundary = (type: string, innerVal: string | number) => {
-  const value = new Date(innerVal);
-  const boundary = new Date((props as any)[`${type}Date`]);
-  const year = dayjs(boundary).year();
-  let month = 1;
-  let date = 1;
-  let hour = 0;
-  let minute = 0;
-  if (type === "max") {
-    month = 12;
+  const value = new Date(innerVal)
+  const boundary = new Date((props as any)[`${type}Date`])
+  const year = dayjs(boundary).year()
+  let month = 1
+  let date = 1
+  let hour = 0
+  let minute = 0
+  if (type === 'max') {
+    month = 12
     // 月份的天数
-    date = dayjs(value).daysInMonth() || 31;
-    hour = 23;
-    minute = 59;
+    date = dayjs(value).daysInMonth() || 31
+    hour = 23
+    minute = 59
   }
   // 获取边界值，逻辑是：当年达到了边界值(最大或最小年)，就检查月允许的最大和最小值，以此类推
   if (dayjs(value).year() === year) {
-    month = dayjs(boundary).month() + 1;
+    month = dayjs(boundary).month() + 1
     if (dayjs(value).month() + 1 === month) {
-      date = dayjs(boundary).date();
+      date = dayjs(boundary).date()
       if (dayjs(value).date() === date) {
-        hour = dayjs(boundary).hour();
+        hour = dayjs(boundary).hour()
         if (dayjs(value).hour() === hour) {
-          minute = dayjs(boundary).minute();
+          minute = dayjs(boundary).minute()
         }
       }
     }
@@ -559,15 +665,15 @@ const getBoundary = (type: string, innerVal: string | number) => {
     [`${type}Date`]: date,
     [`${type}Hour`]: hour,
     [`${type}Minute`]: minute,
-  };
-};
+  }
+}
 const onShowByClickInput = () => {
   if (!input.value.disabled) {
-    showByClickInput.value = !showByClickInput.value;
+    showByClickInput.value = !showByClickInput.value
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
-@import "./index.scss";
+@import './index.scss';
 </style>