-> 1.02

README.md

@@ -9,7 +9,7 @@ $ npm install vue-laypage --save
 ```
 
 ```
-import Laypage from 'vue-laypage';
+import Laypage from 'vue-laypage'
 export default {
   components: {
     Laypage
@@ -20,9 +20,10 @@ export default {
 or
 
 ```
-import Vue from 'vue';
-import Laypage from 'vue-laypage';
-Vue.component('Laypage', Laypage);
+import Vue from 'vue'
+import Laypage from 'vue-laypage'
+
+Vue.use(Laypage)
 ```
 ## Props
 | Name | Type | Description |

demo/App.vue

@@ -12,8 +12,6 @@
 </template>
 
 <script>
-  import Laypage from '../src/Laypage';
-
   export default {
     name: 'app',
     data() {
@@ -27,12 +25,9 @@
         next: false
       }
     },
-    components: {
-      Laypage
-    },
     methods: {
       cb(page) {
-        this.page = page;
+        this.page = page
       }
     }
   }

demo/index.js

@@ -1,5 +1,8 @@
-import Vue from 'vue';
-import App from './App';
+import Vue from 'vue'
+import App from './App'
+import Laypage from '../src/index'
+
+Vue.use(Laypage)
 
 new Vue({
   el: '#app',

hot

@@ -0,0 +1 @@
+hot reloading enabled

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-laypage",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A simple pagination component for Vue.js",
   "main": "dist/vueLaypage.js",
   "scripts": {
@@ -24,8 +24,9 @@
   "author": "sinchang <sinchangwen@gmail.com>",
   "license": "MIT",
   "devDependencies": {
-    "laravel-mix": "^0.7.2",
-    "vue": "^2.1.10"
+    "laravel-mix": "^0.7.2"
   },
-  "dependencies": {}
+  "dependencies": {
+    "vue": "^2.1.10"
+  }
 }

src/Laypage.vue

@@ -62,47 +62,52 @@
     },
     computed: {
       pagesNumber() {
-        let from, to;
-        let diff = (this.groups - 1) / 2;
+        let from, to
+        let diff = (this.groups - 1) / 2
+
+        if (this.groups > this.pages) {
+          throw new Error('groups can not greater than pages')
+        }
+
         if (this.diff % 2 === 0) {
-          from = this.cur - diff;
-          to = this.cur + diff;
+          from = this.cur - diff
+          to = this.cur + diff
         } else {
-          from = this.cur - Math.floor(diff);
-          to = this.cur + Math.ceil(diff);
+          from = this.cur - Math.floor(diff)
+          to = this.cur + Math.ceil(diff)
         }
 
         if (from < 1) {
-          from = 1;
-          to = this.groups;
+          from = 1
+          to = this.groups
         }
 
         if (to >= this.pages) {
-          to = this.pages;
-          from = to - this.groups + 1;
+          to = this.pages
+          from = to - this.groups + 1
         }
 
-        let pagesArr = [];
+        let pagesArr = []
 
         while (from <= to) {
-          pagesArr.push(from);
-          from++;
+          pagesArr.push(from)
+          from++
         }
 
-        return pagesArr;
+        return pagesArr
       }
     },
     methods: {
       changePage(page) {
-        this.cur = page;
-        this.jump(page);
+        this.cur = page
+        this.jump(page)
       },
       jumpFunc() {
         if (!this.jumpPage) {
-          return;
+          return
         }
-        this.changePage(parseInt(this.jumpPage));
-        this.jumpPage = '';
+        this.changePage(parseInt(this.jumpPage))
+        this.jumpPage = ''
       }
     }
   }

src/index.js

@@ -1,3 +1,11 @@
-import Laypage from './Laypage.vue';
+import Laypage from './Laypage.vue'
 
-export default Laypage;
+Laypage.install = Vue => {
+  Vue.component(Laypage.name, Laypage)
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+  window.Vue.use(Laypage)
+}
+
+export default Laypage