【VUE】vue分页插件share

最近痴迷于项目不能自拔，笔记也没怎么整理，先把项目中自己写的插件拉出来溜溜，都是基于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<this.allPages){                    this.nowPage++;                    this.btnNum();                    this.nowBtn();                    this.pagesChange();                }            },            nowBtn:function () {                $(".li-btn1").css("background-color","#edeef2");                $(".li-btn1").css("color","#555866");                if(this.allPages<6){                    if(this.nowPage===1){                        $("#click-btn1").css("background-color","#15babd");                        $("#click-btn1").css("color","white");                    }else if(this.nowPage===2){                        $("#click-btn2").css("background-color","#15babd");                        $("#click-btn2").css("color","white");                    }else if(this.nowPage===3){                        $("#click-btn3").css("background-color","#15babd");                        $("#click-btn3").css("color","white");                    }else if(this.nowPage===4){                        $("#click-btn4").css("background-color","#15babd");                        $("#click-btn4").css("color","white");                    }else if(this.nowPage===5){                        $("#click-btn5").css("background-color","#15babd");                        $("#click-btn5").css("color","white");                    }                }else {                    if(this.nowPage===1){                        $("#click-btn1").css("background-color","#15babd");                        $("#click-btn1").css("color","white");                    }else if(this.nowPage===2){                        $("#click-btn2").css("background-color","#15babd");                        $("#click-btn2").css("color","white");                    }else if(this.nowPage===3){                        $("#click-btn3").css("background-color","#15babd");                        $("#click-btn3").css("color","white");                    }else if(this.nowPage===this.allPages-1){                        $("#click-btn4").css("background-color","#15babd");                        $("#click-btn4").css("color","white");                    }else if(this.nowPage===this.allPages){                        $("#click-btn5").css("background-color","#15babd");                        $("#click-btn5").css("color","white");                    }else {                        $("#click-btn3").css("background-color","#15babd");                        $("#click-btn3").css("color","white");                    }                }                },            pagesChange:function () {                if(this.allPages==2){                    $("#click-btn3").css("display","none");                    $("#click-btn4").css("display","none");                    $("#click-btn5").css("display","none");                }else if(this.allPages==3){                    $("#click-btn4").css("display","none");                    $("#click-btn5").css("display","none")                }else if(this.allPages==4){                    $("#click-btn5").css("display","none")                }            },            btnNum:function () {                let that =this;                if(this.allPages<6){                    this.btn1=1;                    this.btn2=2;                    this.btn3=3;                    this.btn4=4;                    this.btn5=5;                }else if(this.allPages>5 && this.nowPage>3  && this.allPages-this.nowPage>1){                    that.btn1=that.nowPage-2;                    that.btn2=that.nowPage-1;                    that.btn3=that.nowPage;                    that.btn4=parseInt(that.nowPage)+1;                    that.btn5=parseInt(that.nowPage)+2;                }else if(this.allPages>5 && this.nowPage>3  && this.allPages==this.nowPage){                    that.btn1=parseInt(that.nowPage)-4;                    that.btn2=parseInt(that.nowPage)-3;                    that.btn3=parseInt(that.nowPage)-2;                    that.btn4=parseInt(that.nowPage)-1;                    that.btn5=parseInt(that.nowPage);                }else if(this.allPages>5 && this.nowPage>3  && this.allPages==this.nowPage+1){                    that.btn1=parseInt(that.nowPage)-3;                    that.btn2=parseInt(that.nowPage)-2;                    that.btn3=parseInt(that.nowPage)-1;                    that.btn4=parseInt(that.nowPage);                    that.btn5=parseInt(that.nowPage)+1;                }else if(this.allPages>5 && this.nowPage<=3){                    this.btn1=1;                    this.btn2=2;                    this.btn3=3;                    this.btn4=4;                    this.btn5=5;                }            },        },        mounted(){            this.btnNum();            this.nowBtn();            this.pagesChange();        }    }

带上效果图

参数介绍：
allPages=总页数
nowPage=当前页数
toPage=前往第几页

大清亡于闭关锁国
IT需要交流
三思先生Q：599901155