Vue. js implements a custom paging component vue-paginaiton and vue paging Components

Vue. js implements a custom paging component vue-paginaiton and vue paging Components

Vue implements a paging component vue-paginaiton

After using vue for a while, I don't want to directly operate DOM anymore. The Data Binding programming experience is really good. A paging component.

The css will not be released here. You can download it on github: vue-pagination.

First, create an instance image.

Template

<Div class = "page-bar"> <ul> <li v-if = "showFirstText"> <a v-on: click = "cur --"> previous page </a> </li> <li v-for = "index in pagenums"> <a v-on: click = "pageChange (index)" >{{ index }}</a> </li> <li v-if = "showNextText"> <a v-on: click = "cur ++"> next page </a> </li> <a> total <I >{{ all }}</I> pages </> </li> </ul> </div>

Before js is introduced, the page is displayed and analyzed, and the all field is simply output directly. {index} is the page number, which requires some dynamic rendering.

var app = new Vue({ el: '#app', data:{ currentpage: 1, totlepage: 28, visiblepage:10, msg: '' },})

Calling new Vue ({parameter}) is to create a basic component and assign it to the variable app. el is the abbreviation of element. It locates the template location. data is data. if you know the total number of pages, but you still need to calculate the page number, the displayed page number is the calculation attribute. therefore, computed is used.

Computed: {// calculation attribute: returns the page number array. Dirty check is automatically performed here, without $ watch (); pagenums: function () {// initialize the front and back page boundary var lowPage = 1; var highPage = this. totlepage; var pageArr = []; if (this. totlepage> this. visiblepage) {// when the total number of pages exceeds the number of visible pages, perform further processing. var subVisiblePage = Math. ceil (this. visiblepage/2); if (this. currentpage> subVisiblePage & this. currentpage <this. totlepage-subVisiblePage + 1) {// The processed page lowPage = this. currentpage-subVisiblePage; highPage = this. currentpage + subVisiblePage-1;} else if (this. currentpage <= subVisiblePage) {// logic lowPage = 1 for processing the previous pages; highPage = this. visiblepage;} logic lowPage of the last few pages processed by else {// this. totlepage-this. visiblepage + 1; highPage = this. totlepage ;}/// after the upper and lower page boundary is determined, you must prepare to press the while (lowPage <= highPage) {pageArr. push (lowPage); lowPage ++;} return pageArr ;}},

View the html template and find the v-if command. It is obvious that when the content is true, the output is not displayed.

Key PointsCheck

<li v-for="index in pagenums" v-bind:class="{ active: currentpage == index}"> <a v-on:click="pageChange(index)">{{ index }}</a> </li>

V-for is the calculation attribute pagenums of the cyclic rendering output. the child element of each loop is assigned to index v-bind: class to bind the class. When rendered to the current badge, a class v-on: click is added to bind the event, I transferred the index to the data transmission field as the parameter, and made a judgment later. The event is passed by default.
Then we add the methods field to the Vue options.

Methods: {pageChange: function (page) {if (this. currentpage! = Page) {this. currentpage = page; this. $ dispatch ('page-change', page); // communication between parent and child components: ==> subcomponents distribute events through $ diapatch, the parent component bubble listens to corresponding events through v-on: page-change ;};}}

Component Interaction

When the component is finished, the problem arises. When the user clicks a page change, how do you notify other components to make corresponding changes? You can insert a statement under the function with the page angle change to notify other components. However, this method is very poor. Available

watch: { currentpage: function(oldValue , newValue){  console.log(arguments) }}

Observe the currentpage data. When it changes, you can get the front and back values. Then notify other components.

For the complete code, see github: vue-pagination.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.