Fix Modify the title when changing language & Modify the lang tag of html

Author: gzg1023

src/components/LangSelect/index.vue

@@ -54,7 +54,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { AppModule } from '@/store/modules/app'
-
+import settings from '../../settings'
 @Component({
   name: 'Login'
 })
@@ -66,8 +66,11 @@ export default class extends Vue {
   private handleSetLanguage(lang: string) {
     this.$i18n.locale = lang
     AppModule.SetLanguage(lang)
+    document.documentElement.lang = lang
+    const title = this.$route.meta.title ? `${this.$t(`route.${this.$route.meta.title}`)} - ${settings.title}` : `${settings.title}`
+    document.title = title
     this.$message({
-      message: 'Switch Language Success',
+      message: this.$t('components.changeLanguageTips').toString(),
       type: 'success'
     })
   }

src/lang/en.ts

@@ -105,7 +105,8 @@ export default {
     stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
     backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
     backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
-    imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.'
+    imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.',
+    changeLanguageTips: 'Switch Language Success'
   },
   table: {
     dynamicTips1: 'Fixed header, sorted by header order',

src/lang/es.ts

@@ -105,7 +105,8 @@ export default {
     stickyTips: 'when the page is scrolled to the preset position will be sticky on the top.',
     backToTopTips1: 'When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner',
     backToTopTips2: 'You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally',
-    imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.'
+    imageUploadTips: 'Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version.',
+    changeLanguageTips: 'Cambiar de idioma correctamente'
   },
   table: {
     dynamicTips1: 'Fixed header, sorted by header order',

src/lang/index.ts

@@ -49,13 +49,15 @@ const messages = {
 export const getLocale = () => {
   const cookieLanguage = getLanguage()
   if (cookieLanguage) {
+    document.documentElement.lang = cookieLanguage
     return cookieLanguage
   }
 
   const language = navigator.language.toLowerCase()
   const locales = Object.keys(messages)
   for (const locale of locales) {
     if (language.indexOf(locale) > -1) {
+      document.documentElement.lang = locale
       return locale
     }
   }

src/lang/it.ts

@@ -105,7 +105,8 @@ export default {
     tinymceTips: 'Il testo ricco è una funzionalità fondamentale della gestione backend, ma allo stesso tempo è un posto molto scosceso. Nel processo di selezionare un Rich Text editor o fatto molte ricerche. I Rich Text editor comuni sul mercato sono molto usati, per questo alla fine ho scelto Tinymce. Vedi la più dettagliata comparazione e introduzione al Rich text editor.',
     backToTopTips1: 'Quando la pagina viene spostata alla posizione specificata, il bottone "Torna Su" compare nell\'angolo in basso a destra',
     backToTopTips2: 'Puoi personalizzare lo stile dei bottoni, mostra / nascondi, altezza di apparizione, altezza del ritorno a capo. Se hai bisogno di un prompt di testo, puoi utilizzare gli elementi element-ui el-tooltip esternamente',
-    imageUploadTips: 'Da quando usavo la verione 1 di Vue che non è compatibile con mockjs, la ho modificata io stesst, e se la userai, è meglio utilizzare versioni ufficiali.'
+    imageUploadTips: 'Da quando usavo la verione 1 di Vue che non è compatibile con mockjs, la ho modificata io stesst, e se la userai, è meglio utilizzare versioni ufficiali.',
+    changeLanguageTips: 'Cambio lingua riuscito'
   },
   table: {
     dynamicTips1: 'Intestazione Fissa, ordinato dall\'ordine delle intestazioni',

src/lang/ja.ts

@@ -105,7 +105,8 @@ export default {
     stickyTips: 'ページの指定位置へスクロールした場合、表示されます。',
     backToTopTips1: 'トップへスクロールが表示されます。',
     backToTopTips2: 'ボタンのスタイルはカスタマイズできます。例えば、show/hide、height、position。 またはElementのel-tooltipを使って、ツールチップを実装できます。',
-    imageUploadTips: 'mockjsは使えないため、カスタマイズしています。公式の最新バージョンを使ってください。'
+    imageUploadTips: 'mockjsは使えないため、カスタマイズしています。公式の最新バージョンを使ってください。',
+    changeLanguageTips: '言語切り替えの成功'
   },
   table: {
     dynamicTips1: '先頭は固定、最後に追加',

src/lang/ko.ts

@@ -105,7 +105,8 @@ export default {
     stickyTips: '페이지의 지정된 위치에 스크롤하면 나타납니다.',
     backToTopTips1: '페이지가 지정된 위치로 스크롤되면 맨 아래 오른쪽 모서리에 맨 위로 이동 단추가 나타납니다.',
     backToTopTips2: '버튼 스타일, 표시 / 숨기기, 모양 높이, 반환 높이를 사용자 정의 할 수 있습니다. 텍스트 프롬프트가 필요한 경우 element-ui el-tooltip 요소를 외부에서 사용할 수 있습니다',
-    imageUploadTips: 'vue @ 1 버전 만 사용하고 있었고 현재 mockjs와 호환되지 않기 때문에 직접 수정했으며 사용하려는 경우 공식 버전을 사용하는 것이 좋습니다.'
+    imageUploadTips: 'vue @ 1 버전 만 사용하고 있었고 현재 mockjs와 호환되지 않기 때문에 직접 수정했으며 사용하려는 경우 공식 버전을 사용하는 것이 좋습니다.',
+    changeLanguageTips: '언어 전환 성공'
   },
   table: {
     dynamicTips1: '정렬된 헤더',

src/lang/zh.ts

@@ -105,7 +105,8 @@ export default {
     stickyTips: '当页面滚动到预设的位置会吸附在顶部',
     backToTopTips1: '页面滚动到指定位置会在右下角出现返回顶部按钮',
     backToTopTips2: '可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素',
-    imageUploadTips: '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。'
+    imageUploadTips: '由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。',
+    changeLanguageTips: '切换语言成功'
   },
   table: {
     dynamicTips1: '固定表头, 按照表头顺序排序',