vue 手写分页

【先看效果】

（1）内容小于2页

不展示页码

 （2）1 < 内容页数< 限定展示页码

展示：页码、上下页；隐藏：首页、末页图标，上、下一区间码。即：（页数：3；限定展示页码：5）

（3）内容页数 > 展示页码

展示：页码、上下页、首页、末页图标，上、下一区间码，去输入指定页

隐藏：无

【VUE代码 html部分】

<ul v-if="pages > 1" class="am-pagination" style="text-align: center;"><li :class="pageIndex === 1 ? 'am-disabled':''" ><a v-if="pages>showPageNum" href="#" @click.prevent="changeIndex(1)" style="display: inline;" title="首页">&laquo;</a><a href="#" @click.prevent="changeIndex(pageIndex-1)" style="display: inline;" title="上一页">‹</a><input title="上一区间码" class="movePageNum" :class="prePageNumClass" style="margin-left: -5px;" type="button" @click="prePageNum" value="…"/></li><!-- 上一页 --><li v-for="p in computePages":key="p"@click.prevent="changeIndex(p)":class="pageIndex === p ? 'am-active':''"><a href="#">{{p}}</a></li><!-- 第1、2…n…页(pageSize=6) --><li :class="pageIndex === pages ? 'am-disabled':''" ><input title="下一区间码" class="movePageNum" :class="nextPageNumClass" style="margin-left: -5px;" type="button" @click="nextPageNum" value="…"/><a href="#" @click.prevent="changeIndex(pageIndex+1)" style="display: inline; margin-right: 5px;" title="下一页">›</a> <a v-if="pages>showPageNum" href="#" @click.prevent="changeIndex(pages)" style="display: inline;" title="末页">&raquo;</a></li><!-- 下一页 --><li v-if="pages>showPageNum" style="display: inline;"><span style="display: inline-block; border: 0; pointer-events: none; padding:0.5em 6px 0.5em 2px; " >去</span> <input ref="inputGotoPage" class="inputGotoPage" type="number" max="99999" min="1" oninput="if(value.length>4) value=value.slice(0,5)" value="1" /><span style="display: inline; border: 0; pointer-events: none; padding: 5px 0;">页</span><input title="点击跳转至相应页" class="movePageNum" type="button" @click="gotoPage" value="go"/></li>
</ul>

【VUE代码 JavaScript部分】

<script>export default {name: "NewsView",data(){return{newsPageList:[],    // 数据集computePages:[],prePageNumClass:'',nextPageNumClass:'',pageIndex: 1,pageSize: 6,        // 每页显示数量offset: 0,pages: 1,total: 0,showPageNum: 5,     // 限制展示页码beginPageNum: 0,endPageNum: 0,}},mounted() {this.getNewList();},methods:{// 获取数据集getNewList(){this.getRequest("/api/page/news", {typeKey:'n_2_1_list', sort:'order_num', order: 'desc', isEnabled: 0, hideContent:"", limit: this.pageSize, offset: this.offset}).then(resp =>{if (resp && resp.code == 0 && resp.data != null){this.explainData(resp.data);}});},// 数据集解析explainData(respData){this.newsPageList = respData.rows;this.total = respData.totalthis.pages = Math.ceil(this.total / this.pageSize)// 首次加载，生成页码。后续加载，依据页码传参加载，依需 刷新页码if(this.endPageNum==0) this.freshPageNum(1);},/* 【新闻分页】----begin------------<<<<<<<<<<<<<<<<<<<<<<<<<-------------------------- */gotoPage(){var gotoPageVal = this.$refs.inputGotoPage.value;if(gotoPageVal){var gotoPage = parseInt(gotoPageVal)if(gotoPage<1){gotoPage = 1;this.$refs.inputGotoPage.value = 1;}if(gotoPage>this.pages) {gotoPage = this.pages;this.$refs.inputGotoPage.value = gotoPage;}if(gotoPage<this.beginPageNum || gotoPage>this.endPageNum) this.freshPageNum(gotoPage)this.changeIndex(gotoPage);}},prePageNum(){this.endPageNum = this.beginPageNum;this.beginPageNum = this.beginPageNum - this.showPageNum + 1if(this.beginPageNum<1) {this.beginPageNum = 1;}var changeIndex = (this.beginPageNum <= this.pageIndex && this.pageIndex <= this.endPageNum) ? this.pageIndex : this.endPageNum;this.freshPageNum(this.beginPageNum);this.changeIndex(changeIndex);},nextPageNum(){this.beginPageNum = this.endPageNum;this.endPageNum = this.endPageNum + this.showPageNum - 1if(this.endPageNum>this.pages) {this.beginPageNum = this.pages - this.showPageNum + 1;}var changeIndex = (this.beginPageNum <= this.pageIndex && this.pageIndex <= this.endPageNum)?this.pageIndex : this.beginPageNum;this.freshPageNum(this.beginPageNum);this.changeIndex(changeIndex);},// 页码总是最多展示 this.showPageNum 个// 三目运算，多语句，返回值为最后的语句结果 // condition ? (statement1, statement2, statement3) : (statement4, statement5); // true 返回值 statement3; false 返回值 statement5freshPageNum(start) {// 计算 起止页码var startMax = this.pages - this.showPageNum + 1; // 起始页码 的最大值start = start>startMax?startMax:start;start<=1?(this.prePageNumClass = 'hiddenChangePage', this.beginPageNum = start = 1):(this.prePageNumClass = 'showChangePage')var end = start + this.showPageNum - 1;	// 根据 起始页码 计算 终止页码end = end > this.pages ? this.pages : end;end==this.pages ? (this.nextPageNumClass = 'hiddenChangePage'):(this.nextPageNumClass = 'showChangePage');this.beginPageNum = start;this.endPageNum = end;// 生成页码var arr = [];for (var i = start; i <= end; i++) {arr.push(i);}this.computePages = arr;},changeIndex(p){if(this.pageIndex != p) {// 只有切换页码，才请求数据。减少重复请求。this.pageIndex = p;this.offset = (this.pageIndex-1) * this.pageSize;this.getNewList();}if(p>this.endPageNum) return this.freshPageNum(p);if(p<this.beginPageNum) return this.freshPageNum(p-this.showPageNum + 1);if(p==1 || p==this.pages) this.freshPageNum(p);			// 首、末的页},/* 【新闻分页】------end------------->>>>>>>>>>>>>>>---------------------- */},
}
</script>

【VUE代码 css部分】

<style scoped>.hiddenChangePage{display: none !important;
}
.showChangePage{display: inline !important;
}</style>