变量定义,title优化

This commit is contained in:
Gary Fu
2023-12-24 13:22:36 +08:00
parent 6696f56ee5
commit f4f25798b9
7 changed files with 19 additions and 6 deletions

3
.env Normal file
View File

@@ -0,0 +1,3 @@
# 程序名称
VITE_APP_NAME=Simple Element+

View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title> <title>%VITE_APP_NAME%</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

View File

@@ -1,9 +1,13 @@
<script setup> <script setup>
import { useGlobalConfigStore } from '@/stores/GlobalConfigStore' import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
import { $changeLocale, elementLocale } from '@/messages' import { $changeLocale, elementLocale, $i18nBundle } from '@/messages'
import { useTitle } from '@vueuse/core'
import { computed } from 'vue'
const globalConfigStore = useGlobalConfigStore() const globalConfigStore = useGlobalConfigStore()
$changeLocale(globalConfigStore.currentLocale) $changeLocale(globalConfigStore.currentLocale)
const title = computed(() => $i18nBundle('common.label.title'))
useTitle(title)
</script> </script>
<template> <template>

View File

@@ -1,6 +1,7 @@
import { baseMessages } from '@/messages/base' import { baseMessages } from '@/messages/base'
export const common = baseMessages() export const common = baseMessages()
common.label.title = '简单Element+模板'
common.label.login = '登录' common.label.login = '登录'
common.label.index = '首页' common.label.index = '首页'
common.label.langCn = '中文' common.label.langCn = '中文'

View File

@@ -1,6 +1,7 @@
import { baseMessages } from '@/messages/base' import { baseMessages } from '@/messages/base'
export const common = baseMessages() export const common = baseMessages()
common.label.title = 'Simple Element+'
common.label.login = 'Login' common.label.login = 'Login'
common.label.index = 'Home' common.label.index = 'Home'
common.label.langCn = '中文' common.label.langCn = '中文'

View File

@@ -1,4 +1,4 @@
import { createI18n } from 'vue-i18n' import { createI18n, useI18n } from 'vue-i18n'
import { ref } from 'vue' import { ref } from 'vue'
import messagesCn from './messages_cn' import messagesCn from './messages_cn'
import messagesEn from './messages_en' import messagesEn from './messages_en'
@@ -41,7 +41,7 @@ export const $changeLocale = locale => {
* @param {boolean} replaceEmpty 为空是否用不为空的数据代替 * @param {boolean} replaceEmpty 为空是否用不为空的数据代替
* @returns {*} * @returns {*}
*/ */
export const $i18nMsg = function (cn, en, replaceEmpty) { export const $i18nMsg = (cn, en, replaceEmpty) => {
const { currentLocale } = useGlobalConfigStore() const { currentLocale } = useGlobalConfigStore()
console.log(currentLocale) console.log(currentLocale)
if (currentLocale === GlobalLocales.CN) { if (currentLocale === GlobalLocales.CN) {
@@ -50,12 +50,15 @@ export const $i18nMsg = function (cn, en, replaceEmpty) {
return replaceEmpty ? (en || cn) : en return replaceEmpty ? (en || cn) : en
} }
export const $i18nBundle = i18n.global.t
export default { export default {
install (app) { install (app) {
app.use(i18n) app.use(i18n)
Object.assign(app.config.globalProperties, { Object.assign(app.config.globalProperties, {
$changeLocale, $changeLocale,
$i18nMsg $i18nMsg,
$i18nBundle
}) })
} }
} }

View File

@@ -1,6 +1,7 @@
import { GlobalLayoutMode, GlobalLocales } from '@/consts/GlobalConstants' import { GlobalLayoutMode, GlobalLocales } from '@/consts/GlobalConstants'
import { useGlobalConfigStore } from '@/stores/GlobalConfigStore' import { useGlobalConfigStore } from '@/stores/GlobalConfigStore'
import { ref } from 'vue' import { ref } from 'vue'
import { $i18nBundle } from '@/messages'
export const useBaseTopMenus = () => { export const useBaseTopMenus = () => {
const globalConfigStore = useGlobalConfigStore() const globalConfigStore = useGlobalConfigStore()
@@ -86,7 +87,7 @@ export const useBusinessMenus = () => {
return ref([ return ref([
{ {
icon: 'HomeFilled', icon: 'HomeFilled',
label: 'Simple Element Plus' labelIf: () => $i18nBundle('common.label.title')
}, },
{ {
icon: 'setting', icon: 'setting',