mirror of https://github.com/longtai-cn/hippo4j
New language switching function on the front page (#921)
* feat: Added Internationalization(vue-i18n) * feat: Adding an Internationalization Instance Co-authored-by: 冯建军 <fengjj@data4truth.com>pull/924/head
PleasePerfunctory
2 years ago
committed by
GitHub
parent
59cb0b28c3
commit
a476d34da2
@ -0,0 +1,30 @@
|
|||||||
|
// 导入elementUi默认中英文语言包
|
||||||
|
import elZh from 'element-ui/lib/locale/lang/zh-CN'
|
||||||
|
import elEn from 'element-ui/lib/locale/lang/en'
|
||||||
|
|
||||||
|
import zh from './lang/zh'
|
||||||
|
import en from './lang/en'
|
||||||
|
|
||||||
|
const lang = localStorage.getItem('locale_lang')
|
||||||
|
|
||||||
|
export const i18nConfig = {
|
||||||
|
locale: lang || 'en', // 默认语种
|
||||||
|
messages: {
|
||||||
|
zh: { ...zh, ...elZh }, // 中文包
|
||||||
|
en: { ...en, ...elEn } // 英文包
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const langSelectList = () => {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
lang: 'zh',
|
||||||
|
name: '中文'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
lang: 'en',
|
||||||
|
name: 'English'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import VueI18n from 'vue-i18n'
|
||||||
|
|
||||||
|
import { i18nConfig } from './config'
|
||||||
|
|
||||||
|
Vue.use(VueI18n)
|
||||||
|
|
||||||
|
const i18n = new VueI18n(i18nConfig)
|
||||||
|
|
||||||
|
export default i18n
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
export default {
|
||||||
|
// 系统
|
||||||
|
system: {
|
||||||
|
login: 'Login Form',
|
||||||
|
username: 'Username',
|
||||||
|
password: 'Password',
|
||||||
|
logOut: 'Log Out'
|
||||||
|
},
|
||||||
|
|
||||||
|
// 公共
|
||||||
|
common: {
|
||||||
|
search: 'Search',
|
||||||
|
addition: 'Addition',
|
||||||
|
serialNumber: 'Serial Number',
|
||||||
|
operation: 'Operation',
|
||||||
|
edit: 'Edit',
|
||||||
|
delete: 'Delete',
|
||||||
|
cancel: 'Cancel',
|
||||||
|
confirm: 'Confirm'
|
||||||
|
},
|
||||||
|
|
||||||
|
// 线程池
|
||||||
|
threadPool: {
|
||||||
|
tenant: 'Tenant',
|
||||||
|
project: 'Project',
|
||||||
|
threadPool: 'Thread Pool',
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
export default {
|
||||||
|
// 系统
|
||||||
|
system: {
|
||||||
|
login: '登 陆',
|
||||||
|
username: '用户名',
|
||||||
|
password: '密码',
|
||||||
|
logOut: '注销'
|
||||||
|
},
|
||||||
|
|
||||||
|
// 公共
|
||||||
|
common: {
|
||||||
|
search: '搜索',
|
||||||
|
addition: '添加',
|
||||||
|
serialNumber: '序号',
|
||||||
|
operation: '操作',
|
||||||
|
edit: '编辑',
|
||||||
|
delete: '删除',
|
||||||
|
cancel: '取消',
|
||||||
|
confirm: '确认'
|
||||||
|
},
|
||||||
|
|
||||||
|
// 线程池
|
||||||
|
threadPool: {
|
||||||
|
tenant: '租户',
|
||||||
|
project: '项目',
|
||||||
|
threadPool: '线程池',
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
<template>
|
||||||
|
<div class="lang-drop-wrap">
|
||||||
|
<el-dropdown @command="selectedLang" trigger="click">
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
{{ currentLangName }}
|
||||||
|
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||||
|
</span>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item
|
||||||
|
v-for="item in langSelectList"
|
||||||
|
:key="item.lang"
|
||||||
|
:command="item.lang"
|
||||||
|
>
|
||||||
|
<span class="dropdown-item-text" :data-active="item.lang === currentLang">{{ item.name }}</span>
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { langSelectList } from './config'
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
langSelectList: langSelectList(),
|
||||||
|
currentLang: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const lang = this.$i18n.locale
|
||||||
|
this.currentLang = lang || null
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
currentLangName() {
|
||||||
|
const langItem = this.langSelectList.find(item => item.lang === this.currentLang)
|
||||||
|
return langItem?.name || '选择语言'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 选择语言
|
||||||
|
selectedLang(value) {
|
||||||
|
this.currentLang = value
|
||||||
|
this.$i18n.locale = value
|
||||||
|
localStorage.setItem('locale_lang', value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.lang-drop-wrap{
|
||||||
|
height: 100%;
|
||||||
|
margin-right: 15px;
|
||||||
|
.el-dropdown-link{
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dropdown-item-text{
|
||||||
|
&[data-active=true] {
|
||||||
|
color: var(--jjext-color-dropdown-text) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue