<script lang="ts" setup>
|
import { useLocaleStore } from '@/store/modules/locale'
|
import { useLocale } from '@/hooks/web/useLocale'
|
import { propTypes } from '@/utils/propTypes'
|
import { useDesign } from '@/hooks/web/useDesign'
|
|
defineOptions({ name: 'LocaleDropdown' })
|
|
const { getPrefixCls } = useDesign()
|
|
const prefixCls = getPrefixCls('locale-dropdown')
|
|
defineProps({
|
color: propTypes.string.def('')
|
})
|
|
const localeStore = useLocaleStore()
|
|
const langMap = computed(() => localeStore.getLocaleMap)
|
|
const currentLang = computed(() => localeStore.getCurrentLocale)
|
|
const setLang = (lang: LocaleType) => {
|
if (lang === unref(currentLang).lang) return
|
// 需要重新加载页面让整个语言多初始化
|
window.location.reload()
|
localeStore.setCurrentLocale({
|
lang
|
})
|
const { changeLocale } = useLocale()
|
changeLocale(lang)
|
}
|
</script>
|
|
<template>
|
<ElDropdown :class="prefixCls" trigger="click" @command="setLang">
|
<Icon
|
:class="$attrs.class"
|
:color="color"
|
:size="18"
|
class="cursor-pointer !p-0"
|
icon="ion:language-sharp"
|
/>
|
<template #dropdown>
|
<ElDropdownMenu>
|
<ElDropdownItem v-for="item in langMap" :key="item.lang" :command="item.lang">
|
{{ item.name }}
|
</ElDropdownItem>
|
</ElDropdownMenu>
|
</template>
|
</ElDropdown>
|
</template>
|
