前端之vue.js分页插件

1. 分页插件

<!-- 分页插件 -->

<template>

<div class="pager pager-pd text-r">

<ul>

<li>

<a v-if="pagemsg.pageIndex!=0" v-on:click="showPage('before')">上一页</a>

</li>

<li v-for="index in indexs" v-bind:class="{ active: pagemsg.pageIndex == (index-1) }">

<a v-on:click="showPage(index)">{{ index < 1 ? "..." : index }}</a>

</li>

<li>

<a v-if="(pagemsg.totalPage!=pagemsg.pageIndex) && (pagemsg.totalCount>0)" v-on:click="showPage('next')" class="on">下一页</a>

</li>

</ul>

</div>

</template>

<script>

export default{

name: 'showPage',

data: function(){

return {

}

},

props:['pagemsg'],

computed: {

//计算...出现的情况及页码

indexs: function () {

var left = 1,

right = this.pagemsg.totalPage + 1,

all = this.pagemsg.totalPage + 1,

pageIndex = this.pagemsg.pageIndex,

ar = [];

if (all >= 11) {

if (pageIndex > 5 && pageIndex < all - 4) {

left = pageIndex - 5

right = pageIndex + 4

} else {

if (pageIndex <= 5) {

left = 1

right = 10

} else {

right = all

left = all - 9

}

}

}

while (left <= right) {

ar.push(left)

left++

}

if (ar[0] > 1) {

ar[0] = 1;

ar[1] = -1;

}

if (ar[ar.length - 1] < all) {

ar[ar.length - 1] = all;

ar[ar.length - 2] = 0;

}

return ar

}

},

methods: {

// 传回页数

showPage: function(item){

if(item == 'before'){

if(this.pagemsg.pageIndex > 0){

this.pagemsg.pageIndex --;

}

}else if(item == 'next'){

if(this.pagemsg.pageIndex < this.pagemsg.totalPage){

this.pagemsg.pageIndex ++;

}

}else{

this.pagemsg.pageIndex = item - 1;

}

this.$emit('current-page', {pageIndex: this.pagemsg.pageIndex});

}

}

}

</script>

<style>

.table-tip {

text-align: center;

font-size: 18px;

margin-top: 50px;

}

.pager-pd li {

list-style: none;

display: inline-block;

outline: none;

}

.pager-pd li:first-child>a {

margin-left: 0px;

}

.pager-pd a {

border: 1px solid #ddd;

text-decoration: none;

position: relative;

float: left;

padding: 6px 12px;

margin-left: -1px;

line-height: 1.42857143;

color: #337ab7;

cursor: pointer;

}

.pager-pd a:hover {

background-color: #eee;

}

.pager-pd .active a {

color: #fff;

cursor: default;

background-color: #1BBC9D;

border-color: #1BBC9D;

}

</style>