【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"> 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