zhengchen.tao/ezbookkeeping
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

automatically scroll to the selected item when opening the language selection drop down list menu

Browse Source
This commit is contained in:
MaysWind
2025-12-21 02:34:57 +08:00
parent a535fbcef1
commit a09d7b57f9
2 changed files with 30 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/desktop/LanguageSelectButton.vue
+21 -4
View File
@@ -1,15 +1,17 @@
<template>
<v-menu location="bottom" max-height="500">
<v-menu location="bottom" max-height="500" @update:model-value="onMenuStateChanged">
<template #activator="{ props }">
<v-btn variant="text" :disabled="disabled" v-bind="props">{{ currentLanguageName }}</v-btn>
</template>
<v-list>
<v-list-item :key="lang.languageTag" :value="lang.languageTag" v-for="lang in allLanguages">
<v-list ref="languageMenu">
<v-list-item :key="lang.languageTag" :value="lang.languageTag"
:class="{ 'list-item-selected': isLanguageSelected(lang.languageTag) }"
v-for="lang in allLanguages">
<v-list-item-title class="cursor-pointer" @click="updateLanguage(lang.languageTag)">
<div class="d-flex align-center">
<span>{{ lang.nativeDisplayName }}</span>
<v-spacer style="min-width: 40px" />
<v-icon :icon="mdiCheck" v-if="isLanguageSelected(lang.languageTag)" />
<v-icon color="primary" :icon="mdiCheck" v-if="isLanguageSelected(lang.languageTag)" />
<span class="text-field-append-text" v-if="!isLanguageSelected(lang.languageTag)">{{ lang.displayName }}</span>
</div>
</v-list-item-title>
@@ -19,8 +21,13 @@
</template>
<script setup lang="ts">
import { VList } from 'vuetify/components/VList';
import { type LanguageSelectBaseProps, type LanguageSelectBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectBase.ts';
import { useTemplateRef, nextTick } from 'vue';
import { scrollToSelectedItem } from '@/lib/ui/common.ts';
import {
mdiCheck
} from '@mdi/js';
@@ -34,4 +41,14 @@ const {
updateLanguage,
isLanguageSelected
} = useLanguageSelectButtonBase(props, emit);
const languageMenu = useTemplateRef<VList>('languageMenu');
function onMenuStateChanged(state: boolean): void {
if (state) {
nextTick(() => {
scrollToSelectedItem(languageMenu.value?.$el, null, null, 'div.v-list-item.list-item-selected');
});
}
}
</script>
src/components/mobile/LanguageSelectButton.vue
+9 -1
View File
@@ -1,9 +1,10 @@
<template>
<f7-button class="language-select-button" small popover-open=".lang-popover-menu" :disabled="disabled" :text="currentLanguageName"></f7-button>
<f7-popover class="lang-popover-menu">
<f7-popover class="lang-popover-menu" @popover:open="onPopoverOpen">
<f7-list dividers>
<f7-list-item link="#" no-chevron popover-close
:class="{ 'list-item-selected': isLanguageSelected(lang.languageTag) }"
:key="lang.languageTag"
:title="lang.nativeDisplayName"
v-for="lang in allLanguages"
@@ -20,6 +21,9 @@
<script setup lang="ts">
import { type LanguageSelectBaseProps, type LanguageSelectBaseEmits, useLanguageSelectButtonBase } from '@/components/base/LanguageSelectBase.ts';
import { scrollToSelectedItem } from '@/lib/ui/common.ts';
import { type Framework7Dom } from '@/lib/ui/mobile.ts';
const props = defineProps<LanguageSelectBaseProps>();
const emit = defineEmits<LanguageSelectBaseEmits>();
@@ -29,6 +33,10 @@ const {
updateLanguage,
isLanguageSelected
} = useLanguageSelectButtonBase(props, emit);
function onPopoverOpen(event: { $el: Framework7Dom }): void {
scrollToSelectedItem(event.$el[0], '.popover-inner', '.popover-inner', 'li.list-item-selected');
}
</script>
<style>