采用Vue2.0开发的分页js组件
Posted 暴脾气大大
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了采用Vue2.0开发的分页js组件相关的知识，希望对你有一定的参考价值。
2017-11-17 19:14:23
基于jQuery的分页插件相信大家伙已经都用过很多了,今天分享一下基于Vue2.0的分页插件pagination.js
由于项目需求，要求使用 Vue2.0 开发一套有关分页的组件
这款 pagination.js 组件，可以按照各自需求定制，以下代码可以直接复制引入项目中
// 1、Vue写的分页有两个参数
// pages：总页数，pageNo：当前页
// 直接上代码，考虑到兼容 IE 等浏览器，其中 template 直接使用字符串拼接方式
1 /** 2 * author: tyd 3 * createTime: 2017/11/13 4 * title: 分页组件 5 */ 6 var pageComponent = Vue.extend({ 7 template: \'<nav aria-label="Page navigation">\'+ 8 \'<ul class="pagination">\'+ 9 \'<li :class="{\\\'disabled\\\':curPage==1}">\'+ 10 \'<a href="javascript:;" @click="goPage(curPage==1?1:curPage-1)" aria-label="Previous">\'+ 11 \'<span aria-hidden="true">上一页</span>\'+ 12 \'</a>\'+ 13 \'</li>\'+ 14 \'<li v-for="page in showPageBtn" :class="{\\\'active\\\':page==curPage}">\'+ 15 \'<a href="javascript:;" v-if="page" @click="goPage(page)">{{page}}</a>\'+ 16 \'<a href="javascript:;" v-else>···</a>\'+ 17 \'</li>\'+ 18 \'<li :class="{\\\'disabled\\\':curPage==pages}">\'+ 19 \'<a href="javascript:;" @click="goPage(curPage==pages?pages:curPage+1)" aria-label="Next">\'+ 20 \'<span aria-hidden="true">下一页</span>\'+ 21 \'</a>\'+ 22 \'</li>\'+ 23 \'<li :class="{\\\'disabled\\\':pages==pages}">\'+ 24 \'<a href="javascript:void(0);">\'+ 25 \'共 {{pages}} 页\'+ 26 \'</a>\'+ 27 \'</li>\'+ 28 \'</ul>\'+ 29 \'</nav>\', 30 // 用户组件传递数据 31 props: { 32 pages: { 33 type: Number, 34 default: 1 35 }, 36 current: { 37 type: Number, 38 default: 1 39 } 40 }, 41 data:function (){ 42 return{ 43 curPage:1 44 } 45 }, 46 computed: { 47 // 显示分页按钮 48 showPageBtn:function() { 49 let pageNum = this.pages; // 总页数 50 let index = this.curPage; // 当前页 51 let arr = []; 52 if (pageNum <= 6) { 53 for (let i = 1; i <= pageNum; i++) { 54 arr.push(i) 55 } 56 return arr 57 } 58 // 对页码显示进行处理，动态展示 59 if (index <= 3) return [1, 2, 3, 4, 0, pageNum]; 60 if (index >= pageNum - 1) return [1, 0, pageNum - 3, pageNum - 2, pageNum - 1, pageNum]; 61 if (index === 4) return [1, 2, 3, 4, 5, 0, pageNum]; 62 if (index === pageNum - 2) return [1, 0, pageNum - 4, pageNum - 3, pageNum - 2, pageNum - 1, pageNum]; 63 return [1, 0, index - 2,index - 1, index, index + 1, index + 2, 0, pageNum]; 64 } 65 }, 66 methods: { 67 goPage:function(page) { 68 if (page != this.curPage) { 69 console.log(page); 70 this.curPage = page; 71 this.$emit(\'navpage\', this.curPage); 72 }else{ 73 console.log(\'Already in the current page\'); 74 } 75 } 76 } 77 }); 78 Vue.component(\'navigation\', pageComponent); // 注册组件
// 2、简单的演示 html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue2.0分页组件</title> 6 <link href="https://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet"> 7 <script src="https://cdn.bootcss.com/vue/2.5.3/vue.js"></script> 8 <!-- 引入外部的 pagination.js 组件即可 --> 9 <script type="text/javascript" src="pagination.js"></script> 10 </head> 11 <body> 12 <div id="app" class="text-right" style="text-align: center;"> 13 <navigation :pages="pages" :current.sync="pageNo" @navpage="pageList"></navigation> 14 </div> 15 <script type="text/javascript"> 16 new Vue({ 17 el: "#app", 18 data: { 19 pageNo: 1, 20 pages: 100 21 }, 22 methods: { 23 pageList:function(curPage) { 24 //根据当前页获取数据 25 this.pageNo = curPage; 26 console.log("当前页：" + this.pageNo); 27 } 28 } 29 }) 30 </script> 31 </body> 32 </html>
演示：
以上是关于采用Vue2.0开发的分页js组件的主要内容，如果未能解决你的问题，请参考以下文章