_javascript tips on how to encapsulate a paging component based on Vue

When you use Vue to do two-way binding, you may often use the paging feature

Next we'll encapsulate a paging component

First define the style file Pagination.css

UL, Li {
  margin:0px;
  padding:0px
}
. Page-bar {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  User-select:none
}
. page-button-disabled {
  color: #ddd!important;
}
. Page-bar li {
  list-style:none;
  Display:inline-block
}
. Page-bar Li:first-child > a {
  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:hover {
  background-color: #eee;
}
. 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;
}

JS file Pagination.js

(function (Vue) {//html template information var template = ' <div class= ' page-bar ' > <ul> \ < Li><a class= "{setbuttonclass (0)}}" v-on:click= prvepage (cur) "> prev </a></li> \ <li V For= "index in Indexs" v-bind:class= "{active:cur = = index}" > \ <a v-on:click= "Btnclick (index)" >{{ Index < 1? "...": index}}</a> \ </li> \ <li><a class= "{{Setbuttonclass (1)}}" V-on:cl ick= "NextPage (cur)" > next page </a></li> </ul> </div> ' var pagination = vue.  Extend ({template:template, props: [' cur ', ' all '], computed: {indexs:function () {var left = 1 var right = this.all var ar = [] if (This.all >=) {if (This.cur > 5 &AMP;&A mp
            This.cur < this.all-4) {left = This.cur-5 right = this.cur + 4} else { IF (this.cur <= 5) {left = 1 right = ten} else {right = This.all left = this.all-9}} (left <= right) {Ar.pus
          H (left) left++} if (Ar[0] > 1) {ar[0] = 1;
        AR[1] =-1;
          } if (Ar[ar.length-1] < This.all) {ar[ar.length-1] = This.all;
        Ar[ar.length-2] = 0; Return AR}}, methods: {//page number Click event Btnclick:function (data) {if (Data <
        1) return; if (data!= this.cur) {this.cur = data this. $dispatch (' Btn-click ', Data)}},//
        Next page nextpage:function (data) {if (this.cur >= this.all) return;
      This.btnclick (this.cur + 1);
        },//prev prvepage:function (data) {if (this.cur <= 1) return; This.btnclick (THIS.CUR-1);  },//Set button to disable style setbuttonclass:function (Isnextbutton) {if (Isnextbutton) {return this.cur >= This.all? "Page-button-disabled": "} else {return this.cur <= 1?" Page-button-disabled ":" "}}}) vue. pagination = pagination}) (Vue)

Pagination paging components are packaged, when you need to use, the introduction of the above two files can

Next we test the effect

<! DOCTYPE html>  

Final effect

The page number toggle event is processed in listen

Click here to download source code: Source Download Address

The above is a small set for you to introduce based on Vue how to encapsulate the paging components, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!