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