Vue封装一个仿淘宝分页组件
实现效果:
使用代码:
<Pagination :page-size="10" :page-no="10" @pageChange="pageChange" :total="1000"/>
组件代码:
<template> <div class="fr page"> <div class="sui-pagination clearfix"> <span :class="{disabled:pageNo === 1}" @click="$emit('pageChange',pageNo-1)">«上一页</span> <span v-if="startEndNumber.start >1 " :class="{active:1 === pageNo}" @click="$emit('pageChange',1)">1</span> <span class="dotted" v-if="startEndNumber.start >2 ">...</span> <span v-for="p in startEndNumber.end" :key="p" v-if="p>=startEndNumber.start" :class="{active:p===pageNo}" @click="$emit('pageChange',p)"> {{ p }} </span> <span v-if="startEndNumber.end<totalPages-1" class="dotted">...</span> <span v-if="startEndNumber.end < totalPages" :class="{active:totalPages === pageNo}" @click="$emit('pageChange',totalPages)">{{totalPages}}</span> <span v-if="startEndNumber.end < totalPages" :class="{disabled:pageNo === totalPages}" @click="$emit('pageChange',pageNo+1)">下一页»</span> <span class="dotted">共{{ totalPages }}页</span> </div> </div> </template> <script> export default { name: "Pagination", props: { pageNo: { type: Number, default: 1 }, pageSize: { type: Number, required: true }, total: { type: Number, required: true }, continues: { type: Number, default: 5 } }, computed: { totalPages() { return Math.ceil(this.total / this.pageSize) }, startEndNumber() { const {continues, pageNo, totalPages} = this; //先定义两个变量存储起始数字与结束数字 let start = 0, end = 0; //连续页码数字5【就是至少五页】,如果出现不正常的现象【就是不够五页】 //不正常现象【总页数没有连续页码多】 if (continues > totalPages) { start = 1; end = totalPages; } else { //正常现象【连续页码5,但是你的总页数一定是大于5的】 //起始数字 start = pageNo - parseInt(continues / 2); //结束数字 end = pageNo + parseInt(continues / 2); //把出现不正常的现象【start数字出现0|负数】纠正 if (start < 1) { start = 1; end = continues; } //把出现不正常的现象[end数字大于总页码]纠正 if (end > totalPages) { end = totalPages; start = totalPages - continues + 1; } } return {start, end}; } } } </script> <style scoped lang="less"> .page { overflow: hidden; .sui-pagination { margin: 18px 0; text-align: center; span { position: relative; display: inline-block; line-height: 18px; text-decoration: none; background-color: #fff; border: 1px solid #e0e9ee; margin-left: -1px; font-size: 14px; padding: 9px 18px; color: #333; cursor: pointer; outline: none; &.active { background-color: #fff; color: #e1251b; cursor: default; } &.disabled { background-color: #ddd; color: #333; cursor: default; } &.dotted { background-color: #fff; color: #333; cursor: default; } } } } </style>