feat:vue-i18n学习

src/boot/vue-i18n.ts

 import { boot } from 'quasar/wrappers';
 import { createI18n } from 'vue-i18n';
-import messages from 'src/i18n';
+import globalLang from 'src/i18n';
 
 export default boot(({ app }) => {
   // Create I18n instance
@@ -8,9 +8,10 @@ export default boot(({ app }) => {
     // something vue-i18n options here ...
     legacy: false, // you must set `false`, to use Composition API
     locale: 'zh-CN', // set current locale
+    formatFallbackMessages: true,
     // missingWarn: false,
     // fallbackWarn: false,
-    messages,
+    messages: globalLang,
   });
 
   // Tell app to use the I18n instance

src/components/uploader-page/UpLoader.vue

@@ -3,11 +3,13 @@
   -->
 <script setup lang="ts">
 import { ref, reactive, computed, nextTick } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useMessage } from 'src/common/hooks';
 
 import { getObjectURL } from './utils';
 var XLSX = require('xlsx');
 
+const { t } = useI18n();
 const { warn } = useMessage();
 
 interface IDetailProps {
@@ -210,7 +212,7 @@ function closeViewDialog() {
           dense
           size="12px"
           label="OK"
-          title="确认上传"
+          :title="t('Confirm upload')"
           :style="{
             backgroundColor: props.dark ? props.bgColor : '#fff',
             color: props.dark ? darkLight : props.bgColor,
@@ -223,7 +225,7 @@ function closeViewDialog() {
           flat
           icon="bi-trash"
           size="12px"
-          title="清除所有"
+          :title="t('clear all')"
           :style="{ color: props.dark ? props.bgColor : '#fff' }"
           @click="removeAll"
         />
@@ -243,8 +245,8 @@ function closeViewDialog() {
           push
           icon="add"
           size="12px"
-          title="选择文件"
-          label="选择文件"
+          :title="t('Select file')"
+          :label="t('Select file')"
           :style="{
             backgroundColor: props.dark ? props.bgColor : '#fff',
             color: props.dark ? darkLight : props.bgColor,
@@ -276,7 +278,7 @@ function closeViewDialog() {
                 flat
                 dense
                 size="12px"
-                title="预览"
+                :title="t('preview')"
                 icon="bi-eye"
                 :style="{ color: props.bgColor }"
                 @click="onView(item)"
@@ -287,7 +289,7 @@ function closeViewDialog() {
                 flat
                 dense
                 size="12px"
-                title="从列表移除"
+                :title="t('remove from list')"
                 icon="bi-x-circle"
                 :style="{ color: props.bgColor }"
                 @click="removeItem(index)"

src/config/enum.ts

@@ -3,4 +3,5 @@ export const Langs = [
   { label: '繁體中文', value: 'zh-TW' },
   { label: 'English', value: 'en-US' },
   { label: '日本', value: 'ja' },
+  { label: '韩国', value: 'ko' },
 ];

src/i18n/en-US.ts

 export default {
-  hello: 'hello!',
-  'World Cup': 'World Cup',
+  ok: 'ok',
+  'Select file': 'Select file',
+  preview: 'preview',
+  'Upload files': 'Upload files',
+  'No file selected': 'No file selected',
+  'Confirm upload': 'Confirm upload',
+  'clear all': 'clear all',
+  'remove from list': 'remove from list',
 };

src/i18n/index.ts

@@ -2,10 +2,12 @@ import zhCN from './zh-CN';
 import zhTW from './zh-TW';
 import enUS from './en-US';
 import ja from './ja';
+import ko from './ko';
 
 export default {
   'zh-CN': zhCN,
   'zh-TW': zhTW,
   'en-US': enUS,
   ja: ja,
+  ko: ko,
 };

src/i18n/ja.ts

 export default {
-  hello: 'こんにちは！',
-  'World Cup': 'ワールドカップ',
+  ok: 'ok',
+  'Select file': 'ファイルを選択',
+  preview: 'プレビュー',
+  'Upload files': 'ファイルをアップロードする',
+  'No file selected': 'ファイルが選択されていません',
+  'Confirm upload': 'アップロードを確認',
+  'clear all': 'すべてクリア',
+  'remove from list': 'リストから削除する',
 };

src/i18n/ko.ts

+export default {
+  ok: 'ok',
+  'Select file': '파일 선택',
+  preview: '시사',
+  'Upload files': '파일 올리기',
+  'No file selected': '선택한 파일이 없습니다',
+  'Confirm upload': '업로드 확인',
+  'clear all': '모두 지우기',
+  'remove from list': '목록에서 제거하다',
+};

src/i18n/zh-CN.ts

 export default {
-  hello: '你好！',
-  'World Cup': '世界杯',
+  ok: 'ok',
+  'Select file': '选择文件',
+  preview: '预览',
+  'Upload files': '上传文件',
+  'No file selected': '未选择任何文件',
+  'Confirm upload': '确认上传',
+  'clear all': '清除所有',
+  'remove from list': '从列表移除',
 };

src/i18n/zh-TW.ts

 export default {
-  hello: '你好！',
-  'World Cup': '世界盃',
+  ok: 'ok',
+  'Select file': '選擇文件',
+  preview: '預覽',
+  'Upload files': '上傳文件',
+  'No file selected': '未選擇任何文件',
+  'Confirm upload': '確認上傳',
+  'clear all': '清除所有',
+  'remove from list': '從列表移除',
 };

src/modules/page6/element/table-study/TableStudy.vue

@@ -12,9 +12,8 @@ import { read, utils, writeFile } from 'xlsx';
 // var XLSX = require('xlsx');
 
 import lang from '../../lang';
-console.log('lang >>>>', lang);
 
-const { t } = useI18n({});
+const { t } = useI18n({ messages: lang });
 const { warn } = useMessage();
 
 const excelTypeList = ['xlsx', 'xls'];
@@ -52,7 +51,10 @@ const columns: any[] = [
   },
 ];
 
-const uploadXlsxMsg = ref('未选择任何文件');
+console.log('lll', t('No file selected'));
+
+const hasUploadXlsxMsg = ref(false);
+const uploadXlsxMsg = ref(t('No file selected'));
 
 const state = reactive({
   rows: [
@@ -135,6 +137,7 @@ function uploadXlsx() {
 
     if (excelTypeList.includes(fileType)) {
       uploadXlsxMsg.value = `${file.name}  ${size}${unit}`;
+      hasUploadXlsxMsg.value = true;
       const data = await file.arrayBuffer();
       const wb = read(data);
       const ws = wb.Sheets[wb.SheetNames[0]];
@@ -211,31 +214,13 @@ function exportTableData() {
         />
       </div>
 
-      <div>
-        <q-btn
-          :label="t('hello1')"
-          square
-          push
-          style="background: #4aacc5; color: white"
-        />
-      </div>
-      <div>
-        <q-btn
-          :label="t('World Cup')"
-          square
-          push
-          style="background: #4aacc5; color: white"
-        />
-      </div>
-
       <div>
         <q-table :rows="state.rows" :columns="columns" row-key="name" />
       </div>
     </div>
     <div class="upload-box">
       <div style="width: 400px; height: 232px" class="q-my-md">
-        <!-- FAD4D4 -->
-        <com-up-loader bg-color="#d9d9f3" dark multiple @on-ok="uploadOk" />
+        <com-up-loader bg-color="#FAD4D4" dark multiple @on-ok="uploadOk" />
       </div>
       <div style="width: 400px; height: 232px" class="q-my-md">
         <com-up-loader bg-color="#A4BE7B" multiple @on-ok="uploadOk" />
@@ -244,7 +229,7 @@ function exportTableData() {
         <div class="upload-xlsx-box">
           <div>
             <q-btn
-              label="上传文件"
+              :label="t('Upload files')"
               square
               push
               :icon="ICON.upload"
@@ -253,8 +238,9 @@ function exportTableData() {
             />
           </div>
           <div>
-            <q-chip :ripple="false" square
-              ><span v-html="uploadXlsxMsg"></span>
+            <q-chip :ripple="false" square>
+              <span v-if="!hasUploadXlsxMsg">{{ t('No file selected') }}</span>
+              <span v-else v-html="uploadXlsxMsg"></span>
             </q-chip>
           </div>
         </div>

src/modules/page6/lang/index.ts

@@ -2,10 +2,12 @@ import zhCN from './zh-CN';
 import zhTW from './zh-TW';
 import enUS from './en-US';
 import ja from './ja';
+import ko from './ko';
 
 export default {
   'zh-CN': zhCN,
   'zh-TW': zhTW,
   'en-US': enUS,
   ja: ja,
+  ko: ko,
 };

src/modules/page6/lang/ko.ts

+export default {
+  hello: '안녕하십니까',
+};