Vue3后台管理系统（八）国际化切换组件

末蓝、 2024-03-26 12:18 64阅读 0赞

#### 一、图标 ####

下载language.svg图标，存放到src/assets/icons文件夹下：[iconfont-阿里巴巴矢量图标库][iconfont-]

![efb20e6314fd4bfe8eb549473b846e1b.png][]

#### 二、组件 ####

在src/components文件夹下新建LangSelect文件夹，并在LangSelect文件夹中新建index.vue

<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>

#### 三、使用案例 ####

<script setup lang="ts">
    import LangSelect from '@/components/LangSelect/index.vue';
    </script>
    
    <template>
      <lang-select class="set-language" />
    </template>

![2225841e4a314a79a8ae239500c2732a.png][]

[iconfont-]: https://www.iconfont.cn/search/index?searchType=icon&q=language&page=1&tag=&fromCollection=1&fills=
[efb20e6314fd4bfe8eb549473b846e1b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0bee2c9154864293b5b9954196d116be.png
[2225841e4a314a79a8ae239500c2732a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/e715cf71e9a344dea335a02fdee2d7b8.png