/*
Use components:
<pagination></pagination>
The properties passed in the component are:
1. total: how many pieces of data are there: required parameters
 2. prepage: how many optional parameters are displayed on one page. The default value is 2
 3. Show page: how many optional parameters are displayed for the number of page numbers? The default value is 3
 4. v-model: what is the current active page number? It must be a dynamic parameter, such as sPage

 */

Effect:

Function Description:

1. Click the page number to jump to the corresponding page

2. You can enter the page you want to reach in the input box (if the page is less than 1, go to the first page, if it is larger than the total number of pages, go to the last page)

3. Click forward and backward to realize forward and backward functions

4. The back button is disabled when on the first page and the forward button is disabled when on the last page

css code:

 <style>
        .box {
            margin: 100px auto 0;
            width: 80%;
        }
        .clear:after {
            content: '';
            display: block;
            clear: both;
        }

        .pagination {
            margin: 10px 0;
        }

        .pagination span {
            margin: 0 10px;
        }

        .pagination span.page, .pagination span.prev, .pagination span.next {
            cursor: pointer;
        }

        .pagination span.page:hover {
            color: #409eff;
        }

        .pagination span.page.active {
            color: #409eff;
            cursor: default;
        }

        .pagination span.prev.disabled, .pagination span.next.disabled {
            color: #cccccc;
            cursor: not-allowed;
        }

        .pagination input[type='text'] {
            padding: 2px;
            border: 1px solid #cccccc;
            border-radius: 5px;
            width: 60px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            outline: none;
            transition: .2s all;
        }
        .pagination input[type='text']:focus {
            border-color: #409eff;
        }
    </style>

vue components:

    Vue.component('pagination',{
        props:{
            total:{
                type:Number
            },
            prepage:{
                type:Number,
                default:2
            },
            showPage:{//How many pages to display in the page
                type:Number,
                default:3
            },
            value:{
                type:Number
            }
        },
        data(){
            return {
                pages:Math.ceil(this.total/this.prepage),//Calculate the total number of pages to display
                val:'',//Record the value in the input box
                currentPage:1,//Record current page
                posPage:Math.floor(this.showPage/2)+1,//Fixed display position when exceeding this page number
                start:1,//Start number of first page
            }
        },
        computed:{
            changeStart(){//Paging logic
                if(this.pages<=this.showPage){
                    return this.start = 1
                }else{
                    if(this.currentPage<=this.posPage){
                        return this.start = 1
                    }else if(this.pages-this.currentPage<=this.posPage){
                        return  this.start = this.pages - this.showPage + 1
                    }else{
                        return  this.start = this.currentPage - this.posPage + 1
                    }
                }
            }
        },
        methods:{
            changeShow(page){
                this.currentPage = page
                this.$emit('input',page)

            },
            jump(){
                if(this.val<1){
                    this.val = 1
                }
                if(this.val>this.pages){
                    this.val = this.pages
                }
                this.val = Math.floor(this.val)
                this.$emit('input',this.val)
                this.currentPage = this.val
                this.val = ''
            },
            prePageHandle(){
                this.currentPage--
                if(this.currentPage<1){
                    this.currentPage = 1
                }
                this.$emit('input',this.currentPage)
            },
            nextPageHandle(){
                this.currentPage++
                if(this.currentPage>this.pages){
                    this.currentPage = this.pages
                }
                this.$emit('input',this.currentPage)

            }

        },
        template:`
               <div class="pagination">
        <span class="total">common {{total}} strip / {{pages}} page</span>

        <span class="prev" :class="{'disabled':value==1}" @click="prePageHandle">&lt;</span>

        <span class="page" v-for="page in showPage"
        :class="{'active':(changeStart + page-1)==value}"
        @click="changeShow(changeStart + page-1)"
        >{{changeStart + page-1}}</span>

        <span class="next" :class="{'disabled':value==pages}" @click="nextPageHandle">&gt;</span>

        <span class="jump">
                //Go to
                <input type="text" v-model="val" @keydown.enter="jump"/>
                //page
            </span>
    </div>
        `
    })

Use example: simple version

<div class="box">  
  <pagination :total="20" :prepage="3" :show-page="3"  v-model="sPage"></pagination>
</div>


new  Vue({
el:'.box',
data:{
       sPage:1
   }

})

Page effect:

Combined with page data example: click the corresponding page number to display the data of the corresponding page number

<div class="box">

     <ul>
         <li v-for="item in showList">{{item}}</li>
     </ul>
    <pagination :total="newList.length" :prepage="prepage" :show-page="10"  v-model="sPage"></pagination>
</div>

    new Vue({
        el:'.box',
        data:{
            newList:[
                ...`When you combine one thing with another, you must make use of it. When you combine one thing with another, you must make good use of your understanding of the essence of the two things, and then think about the similarities and differences between them. When you choose an industry, you should not only think about why I want to It's more important to think about why this industry needs me. If you can only answer the first question but can't answer the second question, you may fail in half. When you combine one thing with another, you must make good use of the two things. Your understanding of the essence of it and then think about the similarities The difference is that when you choose an industry, you don't just have to think about why I want to do it, but more importantly, why the industry needs me. If you can only answer the first question and can't answer the second question, you may fail in half. When you combine one thing with another, you must Take advantage of your understanding of the essence of the two things and think about the similarities and differences between them. When you choose an industry, you should not only think about why I want to do it, but also why I need it. If you can only answer the first question but not the second, you may take this road Half of it will fail. When you combine one thing with another, you must make good use of your understanding of the essence of the two things and think about the similarities and differences between them. When you choose an industry, you should not only think about why I want to do it, but also why I need it If you can only answer the first question and can't answer the second question, you may fail in half. When you combine one thing with another, you must make good use of your understanding of the essence of the two things, and then think about what the similarities and differences are when you choose an industry It's not just about thinking about why I'm in this industry, but also why I'm needed in this industry. If you can only answer the first question and can't answer the second question, you may fail in half. When you combine one thing with another, you must make good use of your understanding of the essence of the two things Think about the similarities and differences between them. When you choose an industry, it's not only about why I want to do it, but also why I need it. If you can only answer the first question and can't answer the second one, you may fail in half. When you make one thing the same as the other When we combine the West with the west, we must make good use of your understanding of the essence of the two things and think about the similarities and differences between them. When you choose an industry, you should not only think about why I want to do this industry, but also think about why this industry needs me. If you can only answer the first question, you can't answer the second one The problem is that when you combine one thing with another, you must make good use of your understanding of the essence of the two things and think about the similarities and differences between them. When you choose an industry, you should not only think about why I want to do it more important Why does this industry need me? If you can only answer the first question, but can't answer the second question, you may fail in half. When you combine one thing with another, you must make good use of your understanding of the essence of the two things, and then think about the similarities and differences between them When you choose an industry, you don't just need to think about why I want to do it. More importantly, you need to think about why this industry needs me. If you can only answer the first question and can't answer the second question, you may fail in half. When you combine one thing with another, you must make good use of two things You understand the essence of it and think about the similarities and differences of it. When you choose an industry, you don't just need to think about why I want to do it. You need to think about why the industry needs me. If you can only answer the first question and can't answer the second question, you may fail in half When you combine one thing with another, you must make good use of your understanding of the essence of the two things, and then think about the similarities and differences between them. When you choose an industry, you should not only think about what I want to do in this industry, but also think about why this industry needs me. If you can only answer No When you can't answer the second question with one question, you may fail in half. When you combine one thing with another, you must make good use of your understanding of the essence of the two things and think about the similarities and differences between them. When you choose an industry, you should not only think about me Why do you want to be an industry? Why do you need me? If you can only answer the first question, but can't answer the second question, you may fail in half. When you combine one thing with another, you must make good use of your understanding of the essence of the two things and think about what it really has What's the same and different is that when you choose an industry, you don't just have to think about why I want to do it, but more importantly, why the industry needs me. If you can only answer the first question and can't answer the second question, you may fail in half. When you combine one thing with another You have to make good use of your understanding of the essence of the two things, and then think about the similarities and differences between them. When you choose an industry, you should not only think about why I want to do this industry, but also think about why this industry needs me. If you can only answer the first question, but not the second question, this is the way You may fail in half. Two things. Your understanding of the essence of it and what are the similarities and differences between them is that when you choose an industry, you should not only think about why I want to do it, but also why the industry needs me. If you can only answer the first question, you can't answer the second one You may fail halfway down the road. In fact, the simplest way to sell is to adapt to the situation with principles. It's a good thing to sell. People who do public relations are never hard to do. I say that a public relations person may use his character for a lifetime to earn points, but he may lose the points for a lifetime because of a small thing`
            ],
            sPage:1,
            prepage:10
        },
        computed:{
            showList(){
                let start = (this.sPage-1)*this.prepage
                let end = start+this.prepage
                // if(start<0){
                //     start = 0
                // }
                start = Math.max(0,start);
                end = Math.min(end,this.newList.length)
                // if(end>this.newList.length){
                //     end = this.newList.length
                // }
                return this.newList.slice(start,end)
            }
        }
    })

Page effect:

ok, after sharing, if you have any questions or good suggestions, please ask