一、图标
下载language.svg图标,存放到src/assets/icons文件夹下:iconfont-阿里巴巴矢量图标库
二、组件
在src/components文件夹下新建LangSelect文件夹,并在LangSelect文件夹中新建index.vue
<!--src/components/LangSelect-->
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';
import SvgIcon from '@/components/SvgIcon/index.vue';
import { useAppStore } from '@/store/modules/app';
const appStore = useAppStore();
const { locale } = useI18n();
function handleLanguageChange(lang: string) {
locale.value = lang;
appStore.changeLanguage(lang);
if (lang == 'en') {
ElMessage.success('Switch Language Successful!');
} else {
ElMessage.success('切换语言成功!');
}
}
</script>
<template>
<el-dropdown
class="lang-select"
trigger="click"
@command="handleLanguageChange"
>
<div class="cursor-pointer w-[40px] h-[50px] leading-[50px] text-center">
<svg-icon class-name="international-icon" icon-class="language" />
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item
:disabled="appStore.language === 'zh-cn'"
command="zh-cn"
>
中文
</el-dropdown-item>
<el-dropdown-item :disabled="appStore.language === 'en'" command="en">
English
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
三、使用案例
<!--src/App.vue-->
<script setup lang="ts">
import LangSelect from '@/components/LangSelect/index.vue';
</script>
<template>
<lang-select class="set-language" />
</template>