增加demo图片

Author: cycgit

README.md

@@ -1,2 +1,7 @@
 # vue-pagination
-vue(1.0.3) 分页组件
+简单的分页组件
+```
+git clone https://github.com/cycgit/vue-pagination.git
+open index.html
+```
+ ![image](https://github.com/cycgit/vue-pagination/blob/master/demo.png)

demo.png

@@ -1,40 +1,46 @@
 
-ul,li{
-    margin: 0px;
-    padding: 0px;
+ul,li {
+  margin: 0px;
+  padding: 0px;
 }
-.page-bar li{
-    list-style: none;
-    display: inline-block;
+
+.page-bar li {
+  list-style: none;
+  display: inline-block;
 }
+
 .page-bar li:first-child>a {
-   margin-left: 0px
+  margin-left: 0px
 }
-.page-bar a{
-    border: 1px solid #ddd;
-    text-decoration: none;
-    position: relative;
-    float: left;
-    padding: 6px 12px;
-    margin-left: -1px;
-    line-height: 1.42857143;
-    color: #337ab7;
-    cursor: pointer
+
+.page-bar a {
+  border: 1px solid #ddd;
+  text-decoration: none;
+  position: relative;
+  float: left;
+  padding: 6px 12px;
+  margin-left: -1px;
+  line-height: 1.42857143;
+  color: #337ab7;
+  cursor: pointer
 }
-.page-bar a:hover{
-    background-color: #eee;
+
+.page-bar a:hover {
+  background-color: #eee;
 }
-.page-bar .active a{
-    color: #fff;
-    cursor: default;
-    background-color: #337ab7;
-    border-color: #337ab7;
+
+.page-bar .active a {
+  color: #fff;
+  cursor: default;
+  background-color: #337ab7;
+  border-color: #337ab7;
 }
-.page-bar i{
-    font-style:normal;
-    color: #d44950;
-    margin: 0px 4px;
-    font-size: 12px;
+
+.page-bar i {
+  font-style:normal;
+  color: #d44950;
+  margin: 0px 4px;
+  font-size: 12px;
 }
 
 

index.css

@@ -14,83 +14,88 @@
 <script>
 export default {
     props: ['cur', 'all'],
-    data(){
+    data() {
       return {}
     },
     computed: {
-        indexs: function(){
-          var left = 1
-          var right = this.all
-          var ar = []
-          if(this.all>= 11){
-            if(this.cur > 5 && this.cur < this.all-4){
-                    left = this.cur - 5
-                    right = this.cur + 4
-            }else{
-                if(this.cur<=5){
-                    left = 1
-                    right = 10
-                }else{
-                    right = this.all
-                    left = this.all -9
-                }
+      indexs: function() {
+        var left = 1
+        var right = this.all
+        var ar = [] 
+        if (this.all >= 11) {
+          if (this.cur > 5 && this.cur < this.all - 4) {
+            left = this.cur - 5
+            right = this.cur + 4
+          } else {
+            if (this.cur <= 5) {
+              left = 1
+              right = 10
+            } else {
+              right = this.all
+              left = this.all -9
             }
-         }
-        while (left <= right){
-            ar.push(left)
-            left ++
+          }
         }
+        while (left <= right) {
+          ar.push(left)
+          left ++
+        }   
         return ar
-       }
+      }
     },
     methods: {
-        btnClick(data){
-            if(data != this.cur){
-                this.cur = data
-                this.$dispatch('btn-click',data)
-
-            }
+      btnClick(data) {
+        if (data != this.cur) {
+          this.cur = data
+          this.$dispatch('btn-click',data)
         }
+      }
     }
 }
 </script>
 
 <style lang="css">
-ul,li{
-    margin: 0px;
-    padding: 0px;
+ul,li {
+  margin: 0px;
+  padding: 0px;
 }
-.page-bar li{
-    list-style: none;
-    display: inline-block;
+
+.page-bar li {
+  list-style: none;
+  display: inline-block;
 }
+
 .page-bar li:first-child>a {
-   margin-left: 0px
+  margin-left: 0px
 }
-.page-bar a{
-    border: 1px solid #ddd;
-    text-decoration: none;
-    position: relative;
-    float: left;
-    padding: 6px 12px;
-    margin-left: -1px;
-    line-height: 1.42857143;
-    color: #337ab7;
-    cursor: pointer
+
+.page-bar a {
+  border: 1px solid #ddd;
+  text-decoration: none;
+  position: relative;
+  float: left;
+  padding: 6px 12px;
+  margin-left: -1px;
+  line-height: 1.42857143;
+  color: #337ab7;
+  cursor: pointer
 }
-.page-bar a:hover{
+
+.page-bar a:hover {
     background-color: #eee;
 }
-.page-bar .active a{
-    color: #fff;
-    cursor: default;
-    background-color: #337ab7;
-    border-color: #337ab7;
+
+.page-bar .active a {
+  color: #fff;
+  cursor: default;
+  background-color: #337ab7;
+  border-color: #337ab7;
 }
-.page-bar i{
-    font-style:normal;
-    color: #d44950;
-    margin: 0px 4px;
-    font-size: 12px;
+
+.page-bar i {
+  font-style:normal;
+  color: #d44950;
+  margin: 0px 4px;
+  font-size: 12px;
 }
 </style>