VUE3+Ant Design Vue+TS实现当前语言切换组件

技术栈：Vue3+TypeScript+Ant Design Vue

简介

当涉及到国际化的内容时，系统往往需要配有多套语言翻译文件，并支持当前语言环境的获取和切换当前语言功能，随之整个系统将切换成对应的多语言。

Vue布局

<template>
  <a-select v-model:value="lang" @change="changeLang" class="lang-select">
      <a-select-option v-for="option in  LangOptions" :key="option.value"  :value="option.value">{{  option.label }}</a-select-option>
    </a-select>
</template>

TS逻辑

主要逻辑文件

<script setup lang=ts>
import { ref } from 'vue'
import { LangOption } from '@/config/interface'
import { langOptions } from '@/config/configData'
import { getCurrLang } from "@/utils/common"

const lang = ref(getCurrLang());
const LangOptions = langOptions;
/*
* 切换语言时修改session并刷新页面
*/
const changeLang = (val: LangOption) => {
  lang.value = val;
  sessionStorage.setItem("language", val);
  window.location.reload();
}
</script>

其他文件

interface 接口定义

// 语言
export enum LangOption {
  EN = 'en',
  ZH = 'zh'
}

configData 语言可选项

import { LangOption } from './interface'

// 语言可选项
export const langOptions = [
  { label: "English", value: LangOption.EN},
  { label: "中文", value: LangOption.ZH},
]

common 通用方法

/** 获取当前环境语言 */
export const getCurrLang = () => {
  const localLang: string = navigator.language.split('-')[0]; // 浏览器语言
  const storageLang: string | null = sessionStorage.getItem("language"); // 本地存储语言
  return storageLang || localLang || 'en';
}

scss样式

.lang-select {
  width: 100px;
}

应用效果

直接在需要应用的地方引入并使用就可以，不需要传任何参数，组件自身会根据当前语言环境自动获取当前语言。