| | |
| | | <template> |
| | | <div class="time-picker"> |
| | | <div class="picker-column" ref="hourRef" @scroll="onScroll('hour')"> |
| | | <div class="picker-column" ref="hourRef" @scroll="onScroll('hour')" :class="disabled ? 'disabled' : ''"> |
| | | <div |
| | | v-for="(h, index) in loopHours" |
| | | :key="index" |
| | |
| | | </div> |
| | | </div> |
| | | <span class="colon">:</span> |
| | | <div class="picker-column" ref="minuteRef" @scroll="onScroll('minute')"> |
| | | <div class="picker-column" ref="minuteRef" @scroll="onScroll('minute')" :class="disabled ? 'disabled' : ''"> |
| | | <div |
| | | v-for="(m, index) in loopMinutes" |
| | | :key="index" |
| | |
| | | <script setup lang="ts"> |
| | | import { ref, watch, onMounted, nextTick } from "vue"; |
| | | |
| | | const props = defineProps<{ modelValue: string }>(); |
| | | const props = defineProps<{ modelValue: string, disabled: boolean }>(); |
| | | const emit = defineEmits(["update:modelValue"]); |
| | | |
| | | const hours = Array.from({ length: 24 }, (_, i) => i); |
| | |
| | | ); |
| | | |
| | | function onScroll(type: "hour" | "minute") { |
| | | if (props.disabled) return; |
| | | if (isProgrammaticScroll[type]) { |
| | | // 程序滚动,忽略,避免死循环 |
| | | isProgrammaticScroll[type] = false; |
| | |
| | | &::-webkit-scrollbar { |
| | | display: none; /* Chrome Safari */ |
| | | } |
| | | &.disabled{ |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .picker-item { |
| | | height: 0.26rem; |