53 lines
1.4 KiB
Vue
53 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { computed, unref } from 'vue'
|
|
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
|
|
import { useLocaleStore } from '@/store/modules/locale'
|
|
import { useLocale } from '@/hooks/web/useLocale'
|
|
import { propTypes } from '@/utils/propTypes'
|
|
import { useDesign } from '@/hooks/web/useDesign'
|
|
|
|
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
|
|
:size="18"
|
|
icon="ion:language-sharp"
|
|
class="cursor-pointer"
|
|
:class="$attrs.class"
|
|
:color="color"
|
|
/>
|
|
<template #dropdown>
|
|
<ElDropdownMenu>
|
|
<ElDropdownItem v-for="item in langMap" :key="item.lang" :command="item.lang">
|
|
{{ item.name }}
|
|
</ElDropdownItem>
|
|
</ElDropdownMenu>
|
|
</template>
|
|
</ElDropdown>
|
|
</template>
|