Vue3+Ts+Less 开发的前端UI框架项目源码.zip（教程+源代码+附上详细代码说明）

<template> <yk-tooltip :arrow="false" placement="bottom" :trigger="['focus', 'none']" :open="openTimepicker" :close-delay="0" :overlay-style="{ backgroundColor: '#fff', color: '#000', padding: '2px 0 8px', transform: 'translateY(-8px)', }" @open-change="onOpenPickerChange" > <yk-input v-if="type === 'time'" v-model="inputValue" placeholder="请选择时间" :size="size" :style="style" :disabled="disabled" @focus="onFocusInput" @change="onChangeInput" > <template #suffix> <IconCloseOutline v-if="isDelete" class="input-icon delete-icon" @mouseleave="isDelete = false" @click="onClickDelete" /> <IconTimeOutline v-else class="input-icon" @mouseenter="isDelete = true" /> </template> </yk-input> <div v-else ref="rangeWrapperRef" class="range-picker-wrapper"> <yk-input ref="startInputRef" v-model="startInputValue" placeholder="开始时间" size="m" style="width: 140px" @focus="onFocusStartInput" @change="onChangeInput" ></yk-input> <div>-</div> <yk-input ref="endInputRef" v-model="endInputValue" placeholder="结束时间" size="m" style="width: 140px" @focus="onFocusEndInput" @change="onChangeInput" ></yk-input> <IconCloseOutline v-if="isDelete" class="input-icon delete-icon" @mouseleave="isDelete = false" @click="onClickDelete" /> <IconTimeOutline v-else class="input-icon" @mouseenter="isDelete = true" /> </div> <template #content> <div class="yk-timepicker-container"> <div class="yk-timepicker"> <div v-if="hourColumn" ref="hourColRef" class="yk-timepicker-column"> <ul> <li v-for="h in hourNum" ref="cellHourRef" :class="[ 'yk-timepicker-cell', { 'yk-timepicker-cell-selected': selected.hour[h - 1] }, { 'yk-timepicker-cell-disabled': isDisabled('hour', h - 1) }, ]" @click.left="selcetCell('hour', h)" > {{ getNeededValue('hour', h - 1) }} </li> </ul> </div> <div v-if="minuteColumn" ref="minColRef" class="yk-timepicker-column"> <ul> <li v-for="m in 60" ref="cellMinutRef" :class="[ 'yk-timepicker-cell', { 'yk-timepicker-cell-selected': selected.minute[m - 1] }, { 'yk-timepicker-cell-disabled': isDisabled('minute', m - 1), }, ]" @click.left="selcetCell('minute', m)" > {{ getNeededValue('minute', m - 1) }} </li> </ul> </div> <div v-if="secondColumn" ref="secColRef" class="yk-timepicker-column"> <ul> <li v-for="s in 60" ref="cellSecondRef" :class="[ 'yk-timepicker-cell', { 'yk-timepicker-cell-selected': selected.second[s - 1] }, { 'yk-timepicker-cell-disabled': isDisabled('second', s - 1), }, ]" @click.left="selcetCell('second', s)" > {{ getNeededValue('second', s - 1) }} </li> </ul> </div> <div v-if="normalizedUse12Hours" ref="halfColRef" class="yk-timepicker-column" > <ul> <li :class="[ 'yk-timepicker-cell', { 'yk-timepicker-cell-selected': halfDay === 'am' }, ]" @click.left="onClickHalfDay('am')" > AM </li> <li :class="[ 'yk-timepicker-cell', { 'yk-timepicker-cell-selected': halfDay === 'pm' }, ]" @click.left="onClickHalfDay('pm')" > PM </li> </ul> </div> </div> <div v-if="$slots.extra" class="yk-timepicker-footer-extra-wrapper"> <slot name="extra"></slot> </div> <div v-if="!disableConfirm" class="yk-timepicker-footer"> <yk-button type="secondary" size="s" @click="onClickNow"> 此刻 </yk-button> <yk-button size="s" @click="onConfirm">确定</yk-button> </div> </div> </template> </yk-tooltip> </template> <script setup lang="ts"> import { computed, ref } from 'vue' import { startWithZero, getNowTimeData, checkTimeStr } from './util' import type { TimeSelected, TimeType, TimeValue, ScrollBehavior, TimePickerProps, HalfDay, PickerValue, RangeTime, } from './time-picker' const props = withDefaults(defineProps<TimePickerProps>(), { modelValue: '', defaultValue: '', size: 'l', style: null, disabled: false, disableConfirm: false, step: null, type: 'time', use12Hours: false, format: 'hh:mm:ss', disabledHours: () => [], disabledMinutes: () => [], disabledSeconds: () => [], }) const emit = defineEmits(['update:modelValue']) const inputValue = ref<string | undefined>() const startInputValue = ref<string | undefined>() const endInputValue = ref<string | undefined>() const selectedValue = ref<PickerValue>({ time: { hour: '', minute: '', second: '' }, startTime: { hour: '', minute: '', second: '' }, endTime: { hour: '', minute: '', second: '' }, }) const confirmedValue = ref<PickerValue>({ time: { hour: '', minute: '', second: '' }, startTime: { hour: '', minute: '', second: '' }, endTime: { hour: '', minute: '', second: '' }, }) const selected = ref<TimeSelected>({ hour: Array(24).fill(false), minute: Array(60).fill(false), second: Array(60).fill(false), }) const hourColRef = ref<HTMLElement>() const minColRef = ref<HTMLElement>() const secColRef = ref<HTMLElement>() const rangeWrapperRef = ref<HTMLElement>() const startInputRef = ref() const endInputRef = ref() const openTimepicker = ref(false) const isDelete = ref(false) const cellMinutRef = ref([]) const cellHourRef = ref([]) const cellSecondRef = ref([]) const halfColRef = ref() const halfDay = ref<HalfDay>('pm') const isStartTime = ref(false) const isEndTime = ref(false) let itemHeight: number // 计算单个时间选项是否禁用 const isDisabled = computed(() => { const disabledHourArr = props.disabledHours() const disabledMinutesArr = props.disabledMinutes() const disabledSecondsArr = props.disabledSeconds() return (type: TimeType, index: number) => { let _arr: number[] = [] switch (type) { case 'hour': _arr = disabledHourArr break case 'minute': _arr = disabledMinutesArr break case 'second': _arr = disabledSecondsArr break default: break } return _arr.includes(index) } }) const hourNum = computed(() => { return normalizedUse12Hours.value ? 13 : 24 }) const hourColumn = computed(() => { return [/hh:mm:ss/gi, /hh:mm/gi, /hh/gi].some((regex) => regex.test(normalizedFormat.value), ) }) const minuteColumn = computed(() => { return [/hh:mm:ss/gi, /mm:ss/gi, /mm/gi].some((regex) => regex.test(normalizedFormat.value), ) }) const secondColumn = computed(() => { return [/hh:mm:ss/gi, /mm:ss/gi, /ss/gi].some((regex) => regex.test(normalizedFormat.value), ) }) const normalizedFormat = computed(() => { if (/a/gi.test(p