julian/chrono-snap
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

time auto scroll

Browse Source
This commit is contained in:
Julian Freeman
2026-03-22 18:29:45 -04:00
parent 1fce04859a
commit aad775d4f4
1 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/App.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from "vue";
import { ref, onMounted, onUnmounted, computed, nextTick } from "vue";
import { load } from "@tauri-apps/plugin-store";
import { open, save } from "@tauri-apps/plugin-dialog";
import { invoke } from "@tauri-apps/api/core";
@@ -65,6 +65,26 @@ const calendarMonth = ref(new Date());
const isStartTimeOpen = ref(false);
const isEndTimeOpen = ref(false);
const openStartTimePicker = async () => {
isStartTimeOpen.value = !isStartTimeOpen.value;
isEndTimeOpen.value = false;
if (isStartTimeOpen.value) {
await nextTick();
const activeItems = document.querySelectorAll('.z-\\[120\\] .bg-\\[\\#007AFF\\].text-white');
activeItems.forEach(el => el.scrollIntoView({ block: 'center' }));
}
};
const openEndTimePicker = async () => {
isEndTimeOpen.value = !isEndTimeOpen.value;
isStartTimeOpen.value = false;
if (isEndTimeOpen.value) {
await nextTick();
const activeItems = document.querySelectorAll('.z-\\[120\\] .bg-\\[\\#007AFF\\].text-white');
activeItems.forEach(el => el.scrollIntoView({ block: 'center' }));
}
};
const calendarDays = computed(() => {
const y = calendarMonth.value.getFullYear();
const m = calendarMonth.value.getMonth();
@@ -384,7 +404,7 @@ const isTagSelectOpen = ref(false);
<!-- Start Time Custom Picker -->
<div class="flex-1 space-y-1 relative">
<label class="text-[10px] font-bold text-[#86868B]">开始时间</label>
<button @click="isStartTimeOpen = !isStartTimeOpen; isEndTimeOpen = false"
<button @click="openStartTimePicker"
class="w-full h-12 bg-[#F2F2F7] rounded-xl px-4 flex items-center justify-center gap-2 hover:bg-[#E5E5E7] transition-all border border-transparent focus:border-[#007AFF]/30">
<!-- <Clock :size="14" class="text-[#86868B] block" /> -->
<span class="text-sm font-bold leading-none">{{ startTimeInput }}</span>
@@ -412,7 +432,7 @@ const isTagSelectOpen = ref(false);
<!-- End Time Custom Picker -->
<div class="flex-1 space-y-1 relative">
<label class="text-[10px] font-bold text-[#86868B]">结束时间</label>
<button @click="isEndTimeOpen = !isEndTimeOpen; isStartTimeOpen = false"
<button @click="openEndTimePicker"
class="w-full h-12 bg-[#F2F2F7] rounded-xl px-4 flex items-center justify-center gap-2 hover:bg-[#E5E5E7] transition-all border border-transparent focus:border-[#007AFF]/30">
<!-- <Clock :size="14" class="text-[#86868B] block" /> -->
<span class="text-sm font-bold leading-none">{{ endTimeInput }}</span>