Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | <template>
<v-select
v-model="model"
:items="i18nStore.locales"
item-title="label"
item-value="code"
density="compact"
variant="underlined"
hide-details
class="lang-select"
style="max-width: 220px"
:menu-props="{ offset: 4 }"
aria-label="Language"
>
<template #prepend>
<span class="text-body-2 mr-2">Language:</span>
</template>
</v-select>
</template>
<script setup lang="ts">
// region Dependency Injection
import { useI18nStore} from '@/stores/i18n'
import { useI18n } from 'vue-i18n'
import {computed, onMounted} from "vue";
// endregion Dependency Injection
// region Component Injection
// endregion Component Injection
// region interface
// endregion interface
// region constants
const i18nStore = useI18nStore()
const { t, locale } = useI18n()
// endregion constants
// region props
// endregion props
// region variable
// endregion variable
// region properties
// endregion properties
// region emits
// endregion emits
// region validator
// endregion validator
// region methods
onMounted(async () => {
await i18nStore.init()
})
const model = computed({
get: () => i18nStore.current,
set: async (v: string) => {
await i18nStore.changeLocale(v, "session")
locale.value = v // 念のため同期（loadLocaleで済んでいるはず）
},
})
// endregion methods
// region export
// endregion export
</script>
<style scoped>
/* 高さを少し詰める */
.lang-select :deep(.v-field) { min-height: 32px; }
</style>
|