国际化支持

.npmignore

@@ -10,4 +10,6 @@ tsconfig.json
 tslint.json
 vue.config.js
 .editorconfig
-*.map
+*.map
+
+dist/lib/**.html

README.md

@@ -1,6 +1,6 @@
 # Vue Router Tab
 
-Vue Router Tab 是基于 Vue Router 的路由页签组件。
+Vue Router Tab 是基于 `Vue Router` 的路由页签组件。
 
 > 由于 Vue 内置的 `<keep-alive>` 只能根据组件的 `name` 来缓存页面，难以实现同一个组件对应多个页签的缓存，本组件定制了 `<router-alive>` 缓存组件
 
@@ -14,7 +14,7 @@ Vue Router Tab 是基于 Vue Router 的路由页签组件。
 - [x] [自定义页签模板](#自定义页签模板)
 - [x] [动态更新页签信息 (标题/图标/提示)](#动态更新页签信息)
 - [x] [路由页面离开 (页签关闭/刷新/替换) 前确认](#路由页面离开前确认)
-- [ ] 国际化
+- [x] 国际化：zh-CN (默认) / en
 
 ---
 
@@ -23,7 +23,11 @@ Vue Router Tab 是基于 Vue Router 的路由页签组件。
 ### NPM
 
 ``` bash
-npm install @bihaiyouhong12/vue-router-tab -S
+# npm
+npm install vue-router-tab -S
+
+# yarn
+yarn add vue-router-tab
 ```
 
 ## 引入
@@ -36,7 +40,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 // 引入组件和样式
-import RouterTab from '@bihaiyouhong12/vue-router-tab'
+import RouterTab from 'vue-router-tab'
 import 'vue-router-tab/dist/lib/vue-router-tab.css'
 
 Vue.use(RouterTab)
@@ -84,6 +88,52 @@ Template:
 <router-tab :alive-key="route => route.fullPath + '1'"></router-tab>
 ```
 
+### `i18n`
+
+国际化语言配置
+
+- 类型: `string | Object`
+
+  - 如果类型为 `string` ，可以设置为内置的语言 `'zh-CN'` (默认) 和 `'en'`
+
+  - 如果类型为 `Object` ，可设置自定义的语言
+
+- 默认值: `'zh-CN'`
+
+
+**指定内置语言**
+
+``` html
+<router-tab i18n="en"></router-tab>
+```
+
+**自定义语言**
+
+``` html
+<router-tab :i18n="lang"></router-tab>
+```
+
+``` javascript
+export default {
+  data () {
+    return {
+      lang: {
+        tab: {
+          untitled: 'Untitled Page'
+        },
+        contextmenu: {
+          refresh: 'Refresh This',
+          refreshAll: 'Refresh All',
+          close: 'Close This',
+          closeLefts: 'Close to the Left',
+          closeRights: 'Close to the Right',
+          closeOthers: 'Close Others'
+        }
+      }
+    }
+  }
+}
+```
 
 ### `tabs`
 

package.json

@@ -1,21 +1,29 @@
 {
   "name": "vue-router-tab",
-  "version": "0.1.0",
-  "description": "基于 Vue 和 Vue Router 的 Tab 页签组件",
-  "keyword": [
+  "version": "0.1.1",
+  "description": "Vue.js tab components, based on Vue Router",
+  "keywords": [
     "vue",
     "router",
     "tab"
   ],
-  "author": "碧海幽虹",
+  "author": "bhuh12 <bihaiyouhong12@126.com> (https://bhuh.net)",
   "private": false,
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bhuh12/vue-router-tab.git"
+  },
+  "bugs": {
+    "url": "https://github.com/bhuh12/vue-router-tab/issues"
+  },
   "main": "dist/lib/vue-router-tab.umd.min.js",
   "scripts": {
     "demo:serve": "vue-cli-service serve",
     "demo:build": "vue-cli-service build --dest dist/demo",
     "lib:build": "vue-cli-service build --target lib --dest dist/lib ./src/lib/RouterTab/index.js",
     "lib:build:report": "vue-cli-service build --report --target lib --dest dist/lib ./src/lib/RouterTab/index.js",
+    "lib:publish": "npm run lib:build && npm publish",
     "lint": "vue-cli-service lint",
     "lint:fix": "vue-cli-service lint --fix"
   },

src/lib/RouterTab/components/RouterTab.js

@@ -1,5 +1,6 @@
 import Vue from 'vue'
 import RouterAlive, { isAlikeRoute, emptyObj, emptyArray } from './RouterAlive'
+import langs from '../lang'
 
 // 滚动
 function scrollTo ($el, left = 0, top = 0) {
@@ -41,6 +42,14 @@ export default {
     // 缓存key，如果为函数，则参数为route
     aliveKey: RouterAlive.props.aliveKey,
 
+    // 国际化
+    // - 为字符串时，可以设置为内置的语言 'zh-CN' (默认) 和 'en'
+    // - 为对象时，可设置自定义的语言
+    i18n: {
+      type: [ String, Object ],
+      default: 'zh-CN'
+    },
+
     // 初始页签数据
     tabs: {
       type: Array,
@@ -83,6 +92,23 @@ export default {
   },
 
   computed: {
+    // 语言内容
+    lang () {
+      let lang = null
+      let i18n = this.i18n
+
+      if (typeof i18n === 'string') {
+        lang = langs[i18n]
+      } else if (typeof i18n === 'object') {
+        lang = i18n
+      }
+
+      // 找不到语言配置，则使用英文
+      if (!lang) lang = langs['en']
+
+      return lang
+    },
+
     // 右键菜单是否当前页签
     isContextTabActived () {
       return this.contextmenu.id === this.activedTab

src/lib/RouterTab/components/RouterTab.vue

@@ -24,8 +24,8 @@
               index
             }">
               <i v-if="icon" class="tab-icon" :class="icon"></i>
-              <span class="tab-title">{{title || '新页签'}}</span>
-              <i class="tab-close" v-if="closable !== false && items.length > 1" @click.prevent="close(id)"></i>
+              <span class="tab-title">{{title || lang.tab.untitled}}</span>
+              <i class="tab-close" v-if="closable !== false && items.length > 1" :title="lang.contextmenu.close" @click.prevent="close(id)"></i>
             </slot>
           </router-link>
         </transition-group>
@@ -52,17 +52,29 @@
     <!-- 右键菜单 -->
     <transition name="router-tab-zoom-lt">
       <div class="router-tab-contextmenu" :style="`left: ${contextmenu.left}px; top: ${contextmenu.top}px;`" v-if="contextmenu.id">
-        <a class="contextmenu-item" :disabled="!isContextTabActived" @click="isContextTabActived && refresh(contextmenu.id)">刷新</a>
+        <a class="contextmenu-item" :disabled="!isContextTabActived" @click="isContextTabActived && refresh(contextmenu.id)">
+          {{lang.contextmenu.refresh}}
+        </a>
 
-        <a class="contextmenu-item" :disabled="items.length < 2" @click="items.length > 1 && refreshAll()">刷新所有</a>
+        <a class="contextmenu-item" :disabled="items.length < 2" @click="items.length > 1 && refreshAll()">
+          {{lang.contextmenu.refreshAll}}
+        </a>
 
-        <a class="contextmenu-item" :disabled="!isContextTabCanBeClosed" @click="isContextTabCanBeClosed && close(contextmenu.id)">关闭</a>
+        <a class="contextmenu-item" :disabled="!isContextTabCanBeClosed" @click="isContextTabCanBeClosed && close(contextmenu.id)">
+          {{lang.contextmenu.close}}
+        </a>
 
-        <a class="contextmenu-item" :disabled="!tabsLeft.length" @click="tabsLeft.length && closeMulti(tabsLeft)">关闭左侧</a>
+        <a class="contextmenu-item" :disabled="!tabsLeft.length" @click="tabsLeft.length && closeMulti(tabsLeft)">
+          {{lang.contextmenu.closeLefts}}
+        </a>
 
-        <a class="contextmenu-item" :disabled="!tabsRight.length" @click="tabsRight.length && closeMulti(tabsRight)">关闭右侧</a>
+        <a class="contextmenu-item" :disabled="!tabsRight.length" @click="tabsRight.length && closeMulti(tabsRight)">
+          {{lang.contextmenu.closeRights}}
+        </a>
 
-        <a class="contextmenu-item" :disabled="!tabsOther.length" @click="tabsOther.length && closeMulti(tabsOther)">关闭其他</a>
+        <a class="contextmenu-item" :disabled="!tabsOther.length" @click="tabsOther.length && closeMulti(tabsOther)">
+          {{lang.contextmenu.closeOthers}}
+        </a>
       </div>
     </transition>
   </div>

src/lib/RouterTab/index.js

@@ -2,7 +2,10 @@ import RouterPage from './mixins/RouterPage'
 import RouterTab from './components/RouterTab.vue'
 
 // 安装
-RouterTab.install = (Vue, options) => {
+RouterTab.install = function install (Vue, options) {
+  if (install.installed) return
+  install.installed = true
+
   Vue.component(RouterTab.name, RouterTab)
   Vue.mixin(RouterPage)
 }

src/lib/RouterTab/lang/en.js

@@ -0,0 +1,13 @@
+export default {
+  tab: {
+    untitled: 'Untitled'
+  },
+  contextmenu: {
+    refresh: 'Refresh',
+    refreshAll: 'Refresh All',
+    close: 'Close',
+    closeLefts: 'Close to the Left',
+    closeRights: 'Close to the Right',
+    closeOthers: 'Close Others'
+  }
+}

src/lib/RouterTab/lang/index.js

@@ -0,0 +1,7 @@
+import zhCN from './zh-CN'
+import en from './en'
+
+export default {
+  'zh-CN': zhCN,
+  en
+}

src/lib/RouterTab/lang/zh-CN.js

@@ -0,0 +1,13 @@
+export default {
+  tab: {
+    untitled: '无标题'
+  },
+  contextmenu: {
+    refresh: '刷新',
+    refreshAll: '刷新所有',
+    close: '关闭',
+    closeLefts: '关闭左侧',
+    closeRights: '关闭右侧',
+    closeOthers: '关闭其他'
+  }
+}