VUE分页插件分享

最近痴迷于项目不能自拔，笔记也没怎么整理，先把项目中自己写的插件拉出来溜溜，都是基于VUE脚手架搭建出来的项目：
1.分页插件
HTML代码：

<template>
    <div class="page-body" v-if="allPages>1">
        <div>
            <ul>
                <li class="li-span">
                    <span>共{{allPages}}页</span>
                </li>
                <li class="li-btn2" @click="toPage(1)">首页</li>
                <li class="li-btn1" @click="btnLastPage()"><</li>
                <li class="li-btn1" id="click-btn1" @click="toPage(btn1)">{{btn1}}</li>
                <li class="li-btn1" id="click-btn2" @click="toPage(btn2)">{{btn2}}</li>
                <li class="li-btn1" id="click-btn3" @click="toPage(btn3)">{{btn3}}</li>
                <li class="li-btn1" id="click-btn4" @click="toPage(btn4)">{{btn4}}</li>
                <li class="li-btn1" id="click-btn5" @click="toPage(btn5)">{{btn5}}</li>
                <li class="li-btn1" @click="btnNextPage()">></li>
                <li class="li-btn1">&nbsp;</li>
                <li class="li-input">
                    <div class=""><input type="text" class="input"  v-model="toPageNum"></div></li>
                <li class="li-btn2" @click="toPage(toPageNum)">跳转</li>
                <li class="li-btn2" @click="toPage(allPages)">尾页</li>
            </ul>
        </div>
    </div>
</template>

CSS样式：

  .page-body{
        position: relative;
        width: 100%;
        min-width: 1200px;
        height: auto;
        margin-top: 48px;
        text-align: right;
    }
    .li-span{
        display: inline-block;
        color: #555;
    }
    .li-btn2{
        color: #555;
        margin-left: 5px;
        width: 62px;
        height: 28px;
        display: inline-block;
        background-color: #edeef2;
        border-radius: 2px;
        text-align: center;
        line-height: 28px;
    }
    .input{
        width: 28px;
        height: 28px;
        border: none;
        text-align: center;
    }
    .li-input{
        color: #555;
        margin-left: -31px;
        position: absolute;
        width: 26px;
        height: 26px;
        display: inline-block;
        background-color: #edeef2;
        border-radius: 2px;
        overflow: hidden;
        border: 1px solid #d7d8db;
    }
    .li-btn1{
        color: #555;
        margin-left: 5px;
        width: 28px;
        height: 28px;
        display: inline-block;
        background-color: #edeef2;
        border-radius: 2px;
        text-align: center;
        line-height: 28px;
    }

JS代码：
import $ from ‘jquery’
export default {
name: ”,
components: {
},
data () {
return {
allPages:10,
nowPage:1,
btn1:1,
btn2:2,
btn3:3,
btn4:4,
btn5:5,
toPageNum:1,
}
},
methods: {
toPage:function (btn) {
let tn=parseInt(btn);
if(tn>0 && tn<=this.allPages){
this.nowPage=tn;
this.btnNum();
this.nowBtn();
this.pagesChange();
this.toPageNum=parseInt(btn)
}else {
this.toPageNum=1
}
},
btnLastPage:function () {
if(this.nowPage>1){
this.nowPage–;
this.btnNum();
this.nowBtn();
this.pagesChange();
}
},
btnNextPage:function () {
if(this.nowPage