Vue.js implement a custom paging component Vue-paginaiton_javascript Tips

Source: Internet
Author: User

Vue implements a paging component Vue-paginaiton

The feeling that Vue used for a while is that I don't want to directly manipulate DOM anymore. The programming experience of data binding is really good. A paging component that is implemented.

The CSS here is not put out, you can see directly to GitHub download: vue-pagination

Let's take a picture of the case first.

Mould Plate

<div class= "Page-bar" >
 <ul>
 <li v-if= "Showfirsttext" ><a v-on:click= "cur--" > Prev </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 >
 <li><a> Total <i>{{all}}</i> page </a></li>
 </ul>

</div >

Before the introduction of JS, the page display, analysis, all the field simple direct output, {{index}} is a page number this requires some dynamic rendering.

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

The call to new Vue ({parameter}) is the creation of a basic component, the assignment to the variable app.el is the abbreviation for the element, and the location of the template. Data is the number. I know the total pages, but to show page numbers, So the display page number is the computed property. So we're going to use computed.

Computed: {
 //computed property: Returns an array of page numbers, where the dirty check is automatically done without $watch ();
 Pagenums:function () {
 ///init front and Back page boundary
 var lowpage = 1;
 var highpage = this.totlepage;
 var pagearr = [];
 if (This.totlepage > This.visiblepage) {//The total number of pages exceeds the number of visible pages, further processing;
 var subvisiblepage = Math.ceil (THIS.VISIBLEPAGE/2) ;
 if (This.currentpage > Subvisiblepage && this.currentpage < This.totlepage-subvisiblepage + 1) {//Processing normal paging C10/>lowpage = This.currentpage-subvisiblepage;
 Highpage = This.currentpage + subVisiblePage-1;
 } else if (this.currentpage <= subvisiblepage) {//processing the logic of the first few pages
 lowpage = 1;
 Highpage = This.visiblepage;
 } else{//the logical
 lowpage = this.totlepage-this.visiblepage + 1 After the processing of several pages;
 Highpage = This.totlepage; 
 }
 When the upper and lower page boundaries are determined, prepare to press into the array while
 (Lowpage <= highpage) {
 pagearr.push (lowpage);
 Lowpage + +;
 }

 Return Pagearr
 }
 },

Look at the HTML template to find the V-IF directive. Obviously when the content is true, the output is not.

Take a look at the key

<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 loop render output computed property pagenums. Each time the child element of the loop is assigned to the index V-bind:class binding class, adding a class when rendering to the current corner V-on:click is bound to the event. I put the index when the parameters into the back to make a judgment, the default pass event events.
And then we add the methods field to the Vue option.

methods:{
 pagechange:function (page) {
 if (this.currentpage!= page) {
 this.currentpage = page;
 this. $dispatch (' page-change ', page); Communication between parent-child components:==> through $diapatch (), distributing events, and the parent component bubbling through the v-on:page-change to listen to the corresponding event;}
 

Component interaction

The component is finished, the problem comes, the user clicks on the page change, how do you inform the other components to make the corresponding changes. You can insert a statement to notify other components under a function that changes the page angle. But this method is very bad practice. can use

Watch: {
 currentpage:function (OldValue, newvalue) {
 console.log (arguments)
 }
}

The currentpage data is observed when it is changed and can be obtained before and after the value. Then notify the other components.

The complete code can look github:vue-pagination

This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.