文章标题

最近痴迷于项目不能自拔，笔记也没怎么整理，先把项目中自己写的插件拉出来溜溜，都是基于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