完成语言切换的学习

main
RogerWork 1 year ago
parent 4f8e8fcb65
commit 1092347375
  1. 2
      package.json
  2. 13
      src/App.vue
  3. 21
      src/i18n/index.js
  4. 6
      src/i18n/language/en.js
  5. 6
      src/i18n/language/zh-cn.js
  6. 63
      src/layout/components/PageHeader.vue
  7. 3
      src/main.js
  8. 2
      src/router/index.js
  9. 11
      src/views/personal/Message.vue
  10. 15
      src/views/personal/PersonalMessage.vue
  11. 34
      yarn.lock

@ -9,10 +9,12 @@
"preview": "vite preview"
},
"dependencies": {
"@element-plus/icons-vue": "^2.1.0",
"@types/node": "^20.8.7",
"element-plus": "^2.4.1",
"normalize.css": "^8.0.1",
"vue": "^3.3.4",
"vue-i18n": "^9.4.1",
"vue-router": "^4.0.13",
"vuex": "^4.0.2"
},

@ -1,19 +1,24 @@
<template>
<el-config-provider :locale="zhCn">
<!-- <el-config-provider :locale="zhCn">-->
<el-config-provider :locale="elementLocales[locale]">
<router-view></router-view>
</el-config-provider>
</template>
<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
// import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import {useI18n} from "vue-i18n";
import {elementLocales} from "@/i18n/index.js";
const {locale} = useI18n();
locale.value = localStorage.getItem('locale') || 'zh-cn';
</script>
<style>
body {
height: 100%;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
@ -22,11 +27,13 @@ body {
color: #2c3e50;
margin-top: 60px;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.cursor {
cursor: pointer;
}

@ -0,0 +1,21 @@
import { createI18n } from 'vue-i18n'
import localZhCn from './language/zh-cn.js'
import localEn from './language/en.js'
import zhCn from "element-plus/es/locale/lang/zh-cn";
import en from "element-plus/es/locale/lang/en"
const i18n = createI18n({
legacy: false,
locale: 'zh-cn',
fallbackLocale: 'zhn-cn',
messages: {
'zh-cn': localZhCn,
'en': localEn,
}
})
export default i18n
export const elementLocales = {
'zh-cn': zhCn,
en
}

@ -0,0 +1,6 @@
export default {
sitename: "PM System",
personnalCenter: "Personal Center",
login: "Login",
logout: "Exit",
}

@ -0,0 +1,6 @@
export default {
sitename: "权限管理系统",
personnalCenter: "个人中心",
login: "登录",
logout: "退出",
}

@ -2,35 +2,62 @@
<div class="header-cont">
<div class="left">
<h1>
<router-link to="/">权限管理系统</router-link>
<router-link to="/">{{ t('sitename') }}</router-link>
</h1>
</div>
<div class="right flex-center">
<div class="lang gap">
<span class="item active">简体中文</span> /
<span class="item">En</span>
<span
class="item"
:class="{active: locale === 'zh-cn'}"
@click="changeLanguage('zh-cn')"
>简体中文</span> /
<span
class="item"
:class="{active: locale === 'en'}"
@click="changeLanguage('en')"
>En</span>
</div>
<div class="gap cursor">
<router-link to="/personal/message"><el-icon><message/></el-icon></router-link>
</div>
<el-dropdown trigger="click">
<div class="flex-center cursor">
这里是用户名
<el-icon><caret-bottom /></el-icon>
<template v-if="isLogin">
<div class="gap cursor">
<router-link to="/personal/message"><el-icon><message/></el-icon></router-link>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>个人中心</el-dropdown-item>
<el-dropdown-item>退出</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown trigger="click">
<div class="flex-center cursor">
{{ username }}
<el-icon><caret-bottom /></el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>{{ t('personnalCenter') }}</el-dropdown-item>
<el-dropdown-item>{{ t('logout') }}</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<template v-else-if="route.name !== 'Login'">
<router-link to="/Login">{{t('login')}}</router-link>
</template>
</div>
</div>
</template>
<script setup>
import Message from "@/views/personal/Message.vue";
import {Message} from '@element-plus/icons-vue'
import {useI18n} from "vue-i18n";
import {ref} from 'vue';
import {useRoute} from "vue-router";
const route = useRoute();
const {locale, t} = useI18n();
function changeLanguage(lang) {
locale.value = lang
localStorage.setItem('locale', lang)
}
const isLogin = ref(false);
const username = ref('admin');
isLogin.value = true;
</script>
<style lang="scss">

@ -2,6 +2,7 @@ import { createApp } from 'vue'
import App from './App.vue'
import router from "./router/index.js";
import store from "./store/index.js";
import i18n from "./i18n/index.js";
import * as ElIcons from "@element-plus/icons-vue";
import 'normalize.css/normalize.css'
@ -11,4 +12,4 @@ for (const name in ElIcons){
app.component(name, ElIcons[name]);
}
app.use(router).use(store).mount('#app')
app.use(router).use(store).use(i18n).mount('#app')

@ -31,7 +31,7 @@ const routes = [
meta: {
requireAuth: true,
},
component: () => import("@/views/personal/Message.vue")
component: () => import("@/views/personal/PersonalMessage.vue")
}
]
},

@ -1,11 +0,0 @@
<script setup>
</script>
<template>
<h1>这是个人中心消息页面</h1>
</template>
<style scoped>
</style>

@ -0,0 +1,15 @@
<template>
<h1>这是个人中心消息页面-{{t('sitename')}}</h1>
<el-pagination :page-size="100" layout="total, prev, pager, next" :total="1000"></el-pagination>
</template>
<script setup>
import {useI18n} from "vue-i18n";
const {locale ,t} = useI18n();
</script>
<style scoped>
</style>

@ -17,7 +17,7 @@
resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31"
integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
"@element-plus/icons-vue@^2.0.6":
"@element-plus/icons-vue@^2.0.6", "@element-plus/icons-vue@^2.1.0":
version "2.1.0"
resolved "https://registry.yarnpkg.com/@element-plus/icons-vue/-/icons-vue-2.1.0.tgz#7ad90d08a8c0d5fd3af31c4f73264ca89614397a"
integrity sha512-PSBn3elNoanENc1vnCfh+3WA9fimRC7n+fWkf3rE5jvv+aBohNHABC/KAR5KWPecxWxDTVT1ERpRbOMRcOV/vA==
@ -152,6 +152,27 @@
resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.1.6.tgz#22958c042e10b67463997bd6ea7115fe28cbcaf9"
integrity sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==
"@intlify/core-base@9.4.1":
version "9.4.1"
resolved "https://registry.yarnpkg.com/@intlify/core-base/-/core-base-9.4.1.tgz#5ab9b624a34af2299a9b45aa331b6516c169b8b5"
integrity sha512-WIwx+elsZbxSMxRG5+LC+utRohFvmZMoDevfKOfnYMLbpCjCSavqTfHJAtfsY6ruowzqXeKkeLhRHbYbjoJx5g==
dependencies:
"@intlify/message-compiler" "9.4.1"
"@intlify/shared" "9.4.1"
"@intlify/message-compiler@9.4.1":
version "9.4.1"
resolved "https://registry.yarnpkg.com/@intlify/message-compiler/-/message-compiler-9.4.1.tgz#aa00629a455e23cece3464293834a02994b4fb04"
integrity sha512-aN2N+dUx320108QhH51Ycd2LEpZ+NKbzyQ2kjjhqMcxhHdxtOnkgdx+MDBhOy/CObwBmhC3Nygzc6hNlfKvPNw==
dependencies:
"@intlify/shared" "9.4.1"
source-map-js "^1.0.2"
"@intlify/shared@9.4.1":
version "9.4.1"
resolved "https://registry.yarnpkg.com/@intlify/shared/-/shared-9.4.1.tgz#bd0d221aaac476b6778a10ddcd0472f812c64e27"
integrity sha512-A51elBmZWf1FS80inf/32diO9DeXoqg9GR9aUDHFcfHoNDuT46Q+fpPOdj8jiJnSHSBh8E1E+6qWRhAZXdK3Ng==
"@jridgewell/sourcemap-codec@^1.4.15":
version "1.4.15"
resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
@ -268,7 +289,7 @@
"@vue/compiler-dom" "3.3.4"
"@vue/shared" "3.3.4"
"@vue/devtools-api@^6.0.0", "@vue/devtools-api@^6.0.0-beta.11":
"@vue/devtools-api@^6.0.0", "@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.5.0":
version "6.5.1"
resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.5.1.tgz#7f71f31e40973eeee65b9a64382b13593fdbd697"
integrity sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==
@ -850,6 +871,15 @@ vue-demi@*:
resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.6.tgz#dc706582851dc1cdc17a0054f4fec2eb6df74c92"
integrity sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==
vue-i18n@^9.4.1:
version "9.4.1"
resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-9.4.1.tgz#c7402662fe9b40b17798afffa9d8bfa4734dd7f5"
integrity sha512-vnQyYE9LBuNOqPpETIcCaGnAyLEqfeIvDcyZ9T+WBCWFTqWw1J8FuF1jfeDwpHBi5JKgAwgXyq1mt8jp/x/GPA==
dependencies:
"@intlify/core-base" "9.4.1"
"@intlify/shared" "9.4.1"
"@vue/devtools-api" "^6.5.0"
vue-router@^4.0.13:
version "4.0.13"
resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-4.0.13.tgz#47f06e2f8ff6120bfff3c27ade1356cc9de7d870"

Loading…
Cancel
Save