标签：meta 按钮 显示 trap color 获取数据 page list query
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>
演示：
标签：meta 按钮 显示 trap color 获取数据 page list query
原文地址：http://www.cnblogs.com/sebastian-tyd/p/7853188.html
