vue elementUI组件国际化

App.vue:

html 复制代码
<template>
  <el-config-provider :locale="appStore.locale" :size="size">
    <router-view />
  </el-config-provider>
</template>
<script setup lang="ts">

import useAppStore from '@/store/modules/app';
const appStore = useAppStore();
</script>

appStore.locale的定义如下:

javascript 复制代码
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import en from 'element-plus/es/locale/lang/en';
import enLocale from '../../lang/en';
import zhCnLocale from '../../lang/zh-cn';
import jaLocale from '../../lang/ja';
import arLocale from '../../lang/ar';
import thLocale from '../../lang/th';
import frLocale from '../../lang/fr';
import idLocale from '../../lang/id';
import plLocale from '../../lang/pl';
import ruLocale from '../../lang/ru';
export const useAppStore = defineStore('app', () => {
  const language = ref(Cookies.get('language'));
  const locale = computed(() => {
    if (language?.value == 'en') {
      return Object.assign({},en,enLocale);
    }else if (language?.value == 'zh-cn') {
      return zhCn;
    }else if (language?.value == 'ja') {
      return Object.assign({},en,jaLocale);
    }else if (language?.value == 'ar') {
      return Object.assign({},en,arLocale);
    }else if (language?.value == 'th') {
      return Object.assign({},en,thLocale);
    }else if (language?.value == 'fr') {
      return Object.assign({},en,frLocale);
    }else if (language?.value == 'id') {
      return Object.assign({},en,idLocale);
    }else if (language?.value == 'pl') {
      return Object.assign({},en,plLocale);
    }else if (language?.value == 'ru') {
      return Object.assign({},en,ruLocale);
    } else {
      return zhCn;
    }
  });
  return {
    language,
    locale,
  };
});
export default useAppStore;
相关推荐
全栈前端老曹8 分钟前
【ReactNative】核心组件与 JSX 语法
前端·javascript·react native·react.js·跨平台·jsx·移动端开发
用户542778485154015 分钟前
JavaScript 闭包详解:由浅入深掌握作用域与内存管理的艺术
前端
小小黑00715 分钟前
快手小程序-实现插屏广告的功能
前端·javascript·小程序
用户542778485154016 分钟前
闭包在 Vue 项目中的应用
前端
TG:@yunlaoda360 云老大19 分钟前
配置华为云国际站代理商OBS跨区域复制时,如何编辑委托信任策略?
java·前端·华为云
dlhto42 分钟前
前端登录验证码组件
前端
@万里挑一44 分钟前
vue中使用虚拟列表,封装虚拟列表
前端·javascript·vue.js
黑臂麒麟1 小时前
Electron for OpenHarmony 跨平台实战开发:Electron 文件系统操作实战
前端·javascript·electron·openharmony
wordbaby1 小时前
Tanstack Router 文件命名速查表
前端
用户7227868123441 小时前
Vue2中能否实现输入中文自动转化为拼音, 且不带音调
vue.js