elk/components/nav/SelectLanguage.vue
kazuya kawaguchi 22e90b5ffd
fix(i18n): language switch is reset (#215)
Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>
2022-11-29 14:29:09 +08:00

35 lines
908 B
Vue

<script lang="ts" setup>
import type { ComputedRef } from 'vue'
import type { LocaleObject } from '#i18n'
import { STORAGE_KEY_LANG } from '~/constants'
const { locale, t, setLocale } = useI18n()
const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
useLocalStorage(STORAGE_KEY_LANG, locale)
const handleLocale = async (locale: string) => {
await setLocale(locale)
}
</script>
<template>
<CommonTooltip :content="t('nav_footer.select_language')">
<CommonDropdown>
<button flex>
<div i-ri:earth-line text-lg />
</button>
<template #popper>
<CommonDropdownItem
v-for="item in locales"
:key="item.code"
:checked="item.code === locale"
@click="handleLocale(item.code)"
>
{{ item.name }}
</CommonDropdownItem>
</template>
</CommonDropdown>
</CommonTooltip>
</template>