feat(i18n): 支持路由页签国际化

实现需求 #6

src/components/RouterTab/RouterTab.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="router-tab">
-    <!-- 页签列表 -->
+    <!-- 页签头部 -->
     <header class="router-tab-header">
       <div class="router-tab-scroll">
+        <!-- 页签列表 -->
         <transition-group
           tag="ul"
           class="router-tab-nav"
@@ -16,7 +17,7 @@
             class="router-tab-item"
             tag="li"
             :class="{ actived: activedTab === id, contextmenu: contextmenu.id === id }"
-            :title="tips || title || ''"
+            :title="i18nText(tips || title) || lang.tab.untitled"
             :to="to"
             @contextmenu.native.prevent="e => showContextmenu(id, index, e)"
           >
@@ -32,7 +33,7 @@
                 class="tab-icon"
                 :class="icon"
               />
-              <span class="tab-title">{{ title || lang.tab.untitled }}</span>
+              <span class="tab-title">{{ i18nText(title) || lang.tab.untitled }}</span>
               <i
                 v-if="closable !== false && items.length > 1"
                 class="tab-close"
@@ -60,6 +61,7 @@
       class="router-tab-container"
       :class="{ loading }"
     >
+      <!-- 路由页面 -->
       <router-alive
         ref="routerAlive"
         :alive-id="aliveId"
@@ -80,6 +82,7 @@
         </transition>
       </router-alive>
 
+      <!-- iframe 页面 -->
       <transition-group
         v-bind="typeof pageTransition === 'string' ? { name: pageTransition } : pageTransition"
         tag="div"

src/components/RouterTab/i18n.js

@@ -1,16 +1,19 @@
-// 语言配置
-import langs from '../../lang'
+import langs from '../../lang' // 语言配置
+import { warn } from '../../util/warn'
 
 // 国际化
 export default {
   props: {
-    // 语言配置，组件显示的语言
+    // 组件语言
     // - 为字符串时，可以设置为内置的语言 'zh-CN' (默认) 和 'en'
     // - 为对象时，可设置自定义的语言
     language: {
       type: [ String, Object ],
       default: 'zh-CN'
-    }
+    },
+
+    // 页签国际化配置 i18n (key, [args])
+    i18n: Function
   },
 
   computed: {
@@ -27,5 +30,50 @@ export default {
 
       return lang
     }
+  },
+
+  methods: {
+    // 获取国际化内容
+    i18nText (text) {
+      let { key, params } = this.ii8nParse(text)
+
+      if (key) {
+        const hasI18nProp = typeof this.i18n === 'function'
+
+        // 未配置 i18n 方法则警告
+        if (!this._hasI18nPropWarn) {
+          warn(hasI18nProp, this.lang.msg.i18nProp)
+          this._hasI18nPropWarn = true
+        }
+
+        if (hasI18nProp) {
+          return this.i18n(key, params)
+        }
+      }
+
+      return text
+    },
+
+    // 解析国际化
+    ii8nParse (text) {
+      let key
+      let params
+
+      // 获取国际化配置
+      if (typeof text === 'string') {
+        // 字符串方式配置：'i18n:custom.lang.key'
+        const res = /^i18n:([^\s]+)$/.exec(text)
+
+        if (res) {
+          key = res[1]
+          params = []
+        }
+      } else if (Array.isArray(text)) {
+        // 数组方式配置：['tab.i18n.key', 'param1', 'param2', ...]
+        [key, ...params] = text
+      }
+
+      return { key, params }
+    }
   }
 }

src/lang/en.js

@@ -11,6 +11,7 @@ export default {
     closeOthers: 'Close Others'
   },
   msg: {
-    keepOneTab: 'Keep at least 1 tab'
+    keepOneTab: 'Keep at least 1 tab',
+    i18nProp: 'Method "i18n" is not defined on the instance'
   }
 }

src/lang/zh-CN.js

@@ -11,6 +11,7 @@ export default {
     closeOthers: '关闭其他'
   },
   msg: {
-    keepOneTab: '至少应保留1个页签'
+    keepOneTab: '至少应保留1个页签',
+    i18nProp: '请提供“i18n”方法以处理国际化内容'
   }
 }

src/util/warn.js

@@ -0,0 +1,15 @@
+const prefix = '[vue-router-tab]'
+
+// 错误
+export function assert (condition, message) {
+  if (!condition) {
+    throw new Error(`${prefix} ${message}`)
+  }
+}
+
+// 警告
+export function warn (condition, message) {
+  if (process.env.NODE_ENV !== 'production' && !condition) {
+    typeof console !== 'undefined' && console.warn(`${prefix} ${message}`)
+  }
+}