Internationalization support

Author: staticdeng

README.md

@@ -34,6 +34,27 @@ import VueLoadmore from 'vuejs-loadmore';
 Vue.use(VueLoadmore);
 ```
 
+## Internationalization support
+
+Support Chinese zh-CN and English en-US, the default is zh-CN.
+
+```js
+import VueLoadmore from 'vuejs-loadmore';
+
+Vue.use(VueLoadmore, {
+  lang: 'en-US'
+})
+```
+
+You can also use `locale.use()` to specify the language.
+
+```js
+import VueLoadmore, { locale } from 'vuejs-loadmore';
+
+Vue.use(VueLoadmore);
+locale.use('en-US');
+```
+
 ## Usage
 
 ### Basic Usage

README.zh-CN.md

@@ -34,6 +34,27 @@ import VueLoadmore from 'vuejs-loadmore';
 Vue.use(VueLoadmore);
 ```
 
+## 国际化支持
+
+支持中文 zh-CN 和英文 en-US, 默认为 zh-CN。
+
+```js
+import VueLoadmore from 'vuejs-loadmore';
+
+Vue.use(VueLoadmore, {
+  lang: 'en-US'
+})
+```
+
+你也可以使用 `locale.use()` 指定语言。
+
+```js
+import VueLoadmore, { locale } from 'vuejs-loadmore';
+
+Vue.use(VueLoadmore);
+locale.use('en-US');
+```
+
 ## 用法
 
 ### 基础用法

example/src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
     <div class="loadmore-head">
-      <div class="text">{{ language === 'Chinese' ? '下拉刷新上拉加载' : 'pull up and pull down' }}</div>
-      <div class="lan" @click="changeLanguage">{{ language === 'Chinese' ? 'English' : 'Chinese' }}</div>
+      <div class="text">{{ language === 'zh-CN' ? '下拉刷新上拉加载' : 'pull up and pull down' }}</div>
+      <div class="lan" @click="changeLanguage">{{ language === 'zh-CN' ? 'English' : 'Chinese' }}</div>
     </div>
     <div class="wrap">
       <vue-loadmore 
@@ -13,7 +13,7 @@
         ref="loadmoreRef"
       >
         <ul class="list-ul">
-          <li class="list-li" v-for="(item, index) of list" :key="item">{{ language === 'Chinese' ? '测试数据' : 'This is data' }} {{ index + 1 }}</li>
+          <li class="list-li" v-for="(item, index) of list" :key="item">{{ language === 'zh-CN' ? '测试数据' : 'This is data' }} {{ index + 1 }}</li>
         </ul>
       </vue-loadmore>
     </div>
@@ -22,7 +22,7 @@
 
 <script>
 // import VueLoadmore from '../../packages/index';
-
+import { locale } from '../../packages/index'
 export default {
   name: 'app',
   // components: {
@@ -34,7 +34,7 @@ export default {
       page: 1,
       finished: false,
       error: false,
-      language: 'Chinese'
+      language: 'en-US'
     };
   },
   mounted() {
@@ -80,7 +80,10 @@ export default {
     },
 
     changeLanguage() {
-      this.language = this.language === 'Chinese' ? 'English' : 'Chinese';
+      this.language = this.language === 'zh-CN' ? 'en-US' : 'zh-CN';
+      
+      // 切换语言
+      locale.use(this.language);
     }
   },
   destroyed() {

example/src/main.js

@@ -1,9 +1,14 @@
 import Vue from 'vue'
-import VueLoadmore from '../../packages/index'
+import VueLoadmore, { locale } from '../../packages/index'
 import App from './App.vue'
 
 Vue.config.productionTip = false
-Vue.use(VueLoadmore)
+
+Vue.use(VueLoadmore, {
+  lang: 'en-US'
+})
+// Vue.use(VueLoadmore);
+// locale.use('en-US');
 
 new Vue({
   render: h => h(App),

lib/index.js

@@ -1,6 +1,6 @@
 {
   "name": "vuejs-loadmore",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A pull-down refresh and pull-up loadmore scroll component for Vue.js",
   "entry": "packages/index.js",
   "main": "lib/index.js",

lib/index.module.js

@@ -1,8 +1,15 @@
 import VueLoadmore from './vuejs-loadmore/index';
 import './vuejs-loadmore/index.scss';
+import locale from './locale/index';
 
 export default {
-  install (Vue) {
+  install (Vue, options = {}) {
     Vue.component('vue-loadmore', VueLoadmore);
+    
+    locale.use(options.lang);
   }
 };
+
+export {
+  locale
+}

package.json

@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import { getDeepVal } from '../utils/getDeepValByKey';
+import zhCN from './lang/zh-CN';
+import enUS from './lang/en-US';
+
+const langLibrary = {
+  'zh-CN': zhCN,
+  'en-US': enUS,
+};
+
+const proto = Vue.prototype;
+const { defineReactive } = Vue.util;
+// 将proto.lang定义成响应式数据
+defineReactive(proto, 'lang', 'zh-CN');
+
+const getLangLibrary = () =>  langLibrary[proto.lang];
+
+export default {
+  // 获取当前语言库的值
+  t(path) {
+    const library = getLangLibrary();
+    return getDeepVal(library, path);
+  },
+
+  // 使用某个语言库(zhCN/enUS)
+  use(lang) {
+    if (langLibrary[lang]) {
+      proto.lang = lang;
+    }
+  }
+};

packages/index.js

@@ -0,0 +1,13 @@
+export default {
+  refresh: {
+    pulling: 'Pull down to refresh',
+    loosing: 'Loosing to refresh',
+    refresh: 'Refreshing',
+    success: 'Refresh success'
+  },
+  loadmore: {
+    loading: 'Loading',
+    finished: 'No more data',
+    error: 'Request failed, click to reload'
+  },
+}