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