VUE开发一个组件——Vue 分页组件

前言

分页组件，无非就是上一页，下一页，到具体页面。没有那么复杂。

想要快速开始的，请向下看。如果想理解源码的，可以直接跳过“快速开始”， 到“源码解读”

快速开始

安装

npm install vue-c-page -S

引入

import CPage from 'vue-h5-page'
Vue.use(CPage)

调用

pageOption: {
  pageNo: 1, // 当前页码
  pageSize: 10, // 每页多少条
  total: 152, // 总共多少条
  totalPage: 16 // 总共多少页
}

jumpTo(pageNo){
  this.pageOption.pageNo = parseInt(pageNo);
  console.log('当前是第' + pageNo + '页');
  // do something
}

github地址： vue-c-page npm地址： vue-c-page

源码解读

结构部分，判断总页数小于等于6时，把所有页码全部展示，大于6的用更复杂的逻辑。具体看下方判断。

	
class="fl">共{{ pageOption.total }}条记录 
	  

		
		
	  
 
	  

		

		  
		
		跳转
	  
	

jumpTo方法，参数就是当前页面。是写在父页面的一个方法。

export default {
    name: "CPage",
	props: ['pageOption', 'jumpTo'],
	data () {
		return {
			goPageNo: this.pageOption.pageNo || 1,
		}
	},
	computed :{
		pageNo() {
			return this.pageOption.pageNo || 1
		},
		totalPage() { 
			return this.pageOption.totalPage || 1;
		}
	},
	watch:{
		goPageNo (val) {
			if(!val || val < 1) {
				this.goPageNo = 1;
			}
			if(val > this.totalPage) {
				this.goPageNo = this.totalPage;
			}
		}
	}
}

pageOption参数包含当前页码，每页条数等等。

pageOption: {
  pageNo: 1, // 当前页码
  pageSize: 10, // 每页多少条
  total: 152, // 总共多少条
  totalPage: 16 // 总共多少页
}

这里监听一下goPageNo，如果goPageNo出现错误（小于0或者大于最大页码）都重新赋值。

推荐文章

《VUE开发一个组件——日历选择控件》
《VUE开发一个组件——移动端弹出层（IOS版）》
《VUE开发一个组件——Vue PC城市选择控件》
《VUE开发一个组件——Vue list列表滑动删除》
《VUE开发一个组件——Vue Slider 双向两滑块限定区域》