修改页面导航栏支持中英文切换

pjqdyd · Jul 23, 2019 · bde4329 · bde4329
1 parent 2f6b2c3
commit bde4329
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 4 deletions.
diff --git a/src/i18n/langs/cn.js b/src/i18n/langs/cn.js
@@ -5,6 +5,12 @@ const cn = {
         'language': '中文',
         'theme': '主题'
     },
+    pages:{
+        'page1': "首页",
+        'page2': "第2页",
+        "page3": "第3页",
+        "page4": "第4页"
+    },
     button:{
         'delete': '删除',
     },

diff --git a/src/i18n/langs/en.js b/src/i18n/langs/en.js
@@ -5,6 +5,12 @@ const en = {
         'language': 'English',
         'theme': 'Theme'
     },
+    pages:{
+        'page1': "Home page",
+        'page2': "Page 2",
+        "page3": "Page 3",
+        "page4": "Page 4"
+    },
     button:{
         'delete': 'Delete',
     },

diff --git a/src/views/nav-menu/NavMenu.vue b/src/views/nav-menu/NavMenu.vue
@@ -10,15 +10,18 @@
       mode="horizontal"
       @select="handleSelect"
     >
-      <el-menu-item index="1">首页</el-menu-item>
-      <el-menu-item index="2">第2页</el-menu-item>
-      <el-menu-item index="3">第3页</el-menu-item>
-      <el-menu-item index="4">第4页</el-menu-item>
+      <!-- 页面(中/英文显示) -->
+      <el-menu-item index="1">{{$t('pages.page1')}}</el-menu-item>
+      <el-menu-item index="2">{{$t('pages.page2')}}</el-menu-item>
+      <el-menu-item index="3">{{$t('pages.page3')}}</el-menu-item>
+      <el-menu-item index="4">{{$t('pages.page4')}}</el-menu-item>
 
+      <!-- 语言选框 -->
       <div class="el-item-box">
         <lang-picker></lang-picker>
       </div>
 
+      <!-- 主题颜色选框 -->
       <div class="el-item-box">
         <theme-picker></theme-picker>
       </div>