elk/components/nav/SelectLanguage.vue

32 lines
854 B
Vue
Raw Normal View History

<script lang="ts" setup>
2022-11-28 16:49:30 +00:00
import type { LocaleObject } from '@nuxtjs/i18n/dist/runtime/composables'
import type { ComputedRef } from 'vue'
2022-11-28 07:12:13 +00:00
import { STORAGE_KEY_LANG } from '~/constants'
const { locale, t } = useI18n()
2022-11-28 07:12:13 +00:00
useLocalStorage(STORAGE_KEY_LANG, locale)
2022-11-28 16:49:30 +00:00
const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
</script>
<template>
<CommonTooltip placement="bottom" :content="t('selectLanguage')">
<CommonDropdown>
2022-11-28 07:16:22 +00:00
<button flex>
<div i-ri:earth-line text-lg />
</button>
<template #popper>
<CommonDropdownItem
2022-11-28 16:49:30 +00:00
v-for="item in locales"
:key="item.code"
:checked="item.code === locale"
@click="locale = item.code"
>
2022-11-28 16:49:30 +00:00
{{ item.name }}
</CommonDropdownItem>
</template>
</CommonDropdown>
</CommonTooltip>
</template>