Java教程

【金秋打卡】第18天 element-plus 国际化处理

本文主要是介绍【金秋打卡】第18天 element-plus 国际化处理,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

课程名称:基于Vue3最新标准,实现后台前端综合解


课程章节: 第一章


课程讲师:Sunday


课程内容:

    

  1. element-plus 语言包:用来处理 element 组件的国际化功能

  2. 自定义语言包:用来处理 非element 组件的国际化功能



首先需要安装 element-plus

npm i element-plus

在 plugins/index

添加 中英文包

import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/lib/locale/lang/en'


并且注册使用

import store from '@/store'export default app => {
  app.use(ElementPlus, {
    locale: store.getters.language === 'en' ? en : zhCn 
  })
}


在需要使用国际化的页面中 引入

import { useI18n } from 'vue-i18n'
// 并将使用的数据 进行转换
i18n.t('msg.login.usernameRule')
// 如果是在template里面 则是
{{ $t('msg.login.title') }}  $t的方式


在一个就是处理缓存, 不然在刷新页面后 就会恢复之前的样子 

进行缓存的方式有两种

  1. vuex 缓存

  2. LocalStorage 缓存


import store from '@/store'/**
 * 返回当前 lang
 */
 function getLanguage() {
  return store && store.getters && store.getters.language
 }


先判断store是否存在 在判断 store中是否有getters 最后在判断 是否有language

lang 文件中分别有两个js 存放英文和中文的 各种json

import { createI18n } from 'vue-i18n'
import mZhLocale from './lang/zh'
import mEnLocale from './lang/en'
import store from '@/store'

const messages = {
  en: {
    msg: {
      ...mEnLocale
    }
  },
  zh: {
    msg: {
      ...mZhLocale
    }
  }
}

/**
 * 返回当前 lang
 */
function getLanguage() {
  return store && store.getters && store.getters.language
}

const i18n = createI18n({
  // 使用 Composition API 模式,则需要将其设置为false
  legacy: false,
  // 全局注入 $t 函数
  globalInjection: true,
  locale: getLanguage(),
  messages
})

export default i18n


https://img3.sycdn.imooc.com/636c48c70001e30b07370734.jpg














这篇关于【金秋打卡】第18天 element-plus 国际化处理的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!