Commit eca8907a11c28d816c3da5a0667f45a38a499012
Committed by
GitHub
1 parent
e1123a2c
fix: Fix the problem that the `lang` attribute of `HTML` will not be set when it…
… is first loaded (#682) * refactor: Encapsulate the function of changing the page language * fix(lang): Fix the problem that the `lang` attribute of `HTML` will not be set when it is first loaded
Showing
2 changed files
with
8 additions
and
3 deletions
src/locales/setupI18n.ts
@@ -3,7 +3,7 @@ import type { I18n, I18nOptions } from 'vue-i18n'; | @@ -3,7 +3,7 @@ import type { I18n, I18nOptions } from 'vue-i18n'; | ||
3 | 3 | ||
4 | import { createI18n } from 'vue-i18n'; | 4 | import { createI18n } from 'vue-i18n'; |
5 | 5 | ||
6 | -import { setLoadLocalePool } from './useLocale'; | 6 | +import { setLoadLocalePool, setHtmlPageLang } from './useLocale'; |
7 | import { localeSetting } from '/@/settings/localeSetting'; | 7 | import { localeSetting } from '/@/settings/localeSetting'; |
8 | import { useLocaleStoreWithOut } from '/@/store/modules/locale'; | 8 | import { useLocaleStoreWithOut } from '/@/store/modules/locale'; |
9 | 9 | ||
@@ -16,7 +16,8 @@ async function createI18nOptions(): Promise<I18nOptions> { | @@ -16,7 +16,8 @@ async function createI18nOptions(): Promise<I18nOptions> { | ||
16 | const locale = localeStore.getLocale; | 16 | const locale = localeStore.getLocale; |
17 | const defaultLocal = await import(`./lang/${locale}.ts`); | 17 | const defaultLocal = await import(`./lang/${locale}.ts`); |
18 | const message = defaultLocal.default?.message ?? {}; | 18 | const message = defaultLocal.default?.message ?? {}; |
19 | - | 19 | + |
20 | + setHtmlPageLang(locale) | ||
20 | setLoadLocalePool((loadLocalePool) => { | 21 | setLoadLocalePool((loadLocalePool) => { |
21 | loadLocalePool.push(locale); | 22 | loadLocalePool.push(locale); |
22 | }); | 23 | }); |
src/locales/useLocale.ts
@@ -17,6 +17,10 @@ interface LangModule { | @@ -17,6 +17,10 @@ interface LangModule { | ||
17 | 17 | ||
18 | const loadLocalePool: LocaleType[] = []; | 18 | const loadLocalePool: LocaleType[] = []; |
19 | 19 | ||
20 | +export function setHtmlPageLang(locale: LocaleType) { | ||
21 | + document.querySelector('html')?.setAttribute('lang', locale); | ||
22 | +} | ||
23 | + | ||
20 | export function setLoadLocalePool(cb: (loadLocalePool: LocaleType[]) => void) { | 24 | export function setLoadLocalePool(cb: (loadLocalePool: LocaleType[]) => void) { |
21 | cb(loadLocalePool); | 25 | cb(loadLocalePool); |
22 | } | 26 | } |
@@ -30,7 +34,7 @@ function setI18nLanguage(locale: LocaleType) { | @@ -30,7 +34,7 @@ function setI18nLanguage(locale: LocaleType) { | ||
30 | (i18n.global.locale as any).value = locale; | 34 | (i18n.global.locale as any).value = locale; |
31 | } | 35 | } |
32 | localeStore.setLocaleInfo({ locale }); | 36 | localeStore.setLocaleInfo({ locale }); |
33 | - document.querySelector('html')?.setAttribute('lang', locale); | 37 | + setHtmlPageLang(locale) |
34 | } | 38 | } |
35 | 39 | ||
36 | export function useLocale() { | 40 | export function useLocale() { |