专栏首页全栈之路vue实现分页组件

vue实现分页组件

填坑之路继续哈~

首先来张图,有图有真相

不喜就喷哈~

参数

分页需要的字段:当前页(curPage),每页大小(pageSize),总页数(total) 作为一个组件,所以以上这些参数最好是从父组件传递过来,可以如下定义:

...
props:[
      "pageSize","curPage","total"
]
...

按钮显示

另外还需要用一些属性控制按钮的是否显示,比如:当前为第一页时不显示上一页和首页按钮,当前为最后一页时不显示下一页和尾页按钮:

...
	data () {
	    return {
                       ...
			"showFirstPage":true,
			"showLastPage":true,
			"showPrevPage":true,
			"showNextPage":true,
                      ...
	    }
	}
...

页面可以如下设置:

<a href="javascript:void(0);" v-show="showFirstPage">首页</a>
<a href="javascript:void(0);" v-show="showPrevPage" >上一页</a>
<a href="javascript:void(0);" v-show="showNextPage" >下一页</a>
<a href="javascript:void(0);" v-show="showLastPage" >尾页</a>

跳转页面大小

页面大小不能用pageSize来控制,需要重新绑定一个变量:

...
data () {
   return {
	   ...
	  "rowNum":this.pageSize
    }
}
...

页面部分可以这么写:

<select v-model="rowNum">
	<option value="10">10</option>
	<option selected="selected" value="20">20</option>
	<option value="50">50</option>
	<option value="100">100</option>
</select>

显示逻辑:

...
	this.showFirstPage = this.curPage> 1
	this.showLastPage = this.curPage< this.total
	this.showPrevPage = this.curPage> 1
	this.showNextPage = this.curPage< this.total
...

页面跳转

但页数太多时,页面跳转就必不可少了,可以使用<input>标签让用户输入,当然需要验证输入是否准确, 首先需要的属性不能少:

...
data () {
	    return {
			"gotoPage":"",
                    ...
          }
}
...

页面代码:

<input type="text" v-model="gotoPage" />
<a href="javascript:void(0);"  >跳转</a>

还有,使用前得做判断:

...
if(this.gotoPage && /[1-9][0-9]*/.test(this.gotoPage)){
...
}
...

唉,没口水了。。。其实,说了这么多,就一句话:吾写这份代码不易,希汝珍惜对待 \^_\^。。。 好了,关门,放代码:

代码在此

template

<template>
	<div class="pager">		
		<a href="javascript:void(0);" v-show="showFirstPage" v-on:click="firstPage" >首页</a>
		<a href="javascript:void(0);" v-show="showPrevPage" v-on:click="prevPage" >上一页</a>
		<a href="javascript:void(0);" v-show="showNextPage" v-on:click="nextPage" >下一页</a>
		<a href="javascript:void(0);" v-show="showLastPage" v-on:click="lastPage" >尾页</a>
		<div>
			<select v-model="rowNum">
				<option value="10">10</option>
				<option selected="selected" value="20">20</option>
				<option value="50">50</option>
				<option value="100">100</option>
			</select>
		</div>		
		<span>{{curPage}}/{{total}}</span>
		<div class="goto">
			<input type="text" v-model="gotoPage" />
			<a href="javascript:void(0);" v-on:click="gotoNextPage" >跳转</a>
		</div>
	</div>
</template>

script

<script>
export default {
	mounted() {
		this.$nextTick(() => { this.initPager() }) //需要延迟初始化
	},
	name: 'Pager',
	data () {
	    return {
			"gotoPage":"",
			"showFirstPage":true,
			"showLastPage":true,
			"showPrevPage":true,
			"showNextPage":true,
			"rowNum":this.pageSize
	    }
	},
	methods:{
		nextPage(){//下一页			
			this.$emit('setPage', this.curPage+ 1 ) //调用父组件方法
		},
		prevPage(){//上一页
			this.$emit('setPage', this.curPage- 1 ) //调用父组件方法
		},
		gotoNextPage(){//跳转页面
			if(this.gotoPage && /[1-9][0-9]*/.test(this.gotoPage)){				
				var pg = parseInt(this.gotoPage)
				if(pg > 0 && pg <= this.pageSize){
					this.$emit('setPage', pg ) //调用父组件方法
				}else{
					this.gotoPage = ""
				}
			}else{
				this.gotoPage = ""
			}
		},		
		firstPage(){
			this.$emit('setPage', 1 ) //调用父组件方法
		},
		lastPage(){
			this.$emit('setPage', this.total ) //调用父组件方法
		},
		rowNumChanged(){
			this.$emit('setRowNum', this.rowNum )
		},
		initPager(){
			this.showFirstPage = this.curPage> 1
			this.showLastPage = this.curPage< this.total
			this.showPrevPage = this.curPage> 1
			this.showNextPage = this.curPage< this.total
			this.gotoPage = ""
		}
	},
	props:[
		"pageSize","curPage","total"
	],
	watch:{
		'rowNum':'rowNumChanged' //监控rowNum
	}
}
</script>

css

<style>
.pager>span,.pager>a,.pager>select,.pager>div{
	float: left;
	margin-left: 10px;
}

.pager{
	width: 600px;
	margin: 0 auto;
	margin-top: 10px;
	height: 48px;
	line-height: 48px;
	margin-bottom: 40px;
}

.pager input,.pager select{
	height:40px; 
	line-height:40px;
	outline:none; 
	border:1px solid #888; 
	padding:10px; 
	box-sizing:border-box;
}
.pager input{
	width: 50px;
}
.pager .goto{
	margin-left: 20px;
}
.pager a{
	color: black;
	font-weight: bold;
	text-decoration: none;
}
.pager a:hover{
	color: green;
}

</style>

好了,以上就是组件的全部代码



那么父组件该如何调用呢?嘿嘿

分页组件的调用

template

<template>
...
<Pager
v-if="!dataChanged" 
ref="pager"
:pageSize="pageSize" 
:page="curPage" 
:total="total"  
@setPage="gotoPage"
 @setRowNum="changeRowNum" />
...
</template>

其中dataChanged用来刷新组件的,参考:vue强制刷新组件

其中setPage和setRowNum分别对应父组件的方法:gotoPage,changeRowNum,参考:vue2.0父子组件以及非父子组件如何通信

script

import Pager from '@/components/Pager'
...
export default{	
  ...
    data(){
		return {
			curPage:1,//当前页
			total:0,//总共页数
			pageSize:20,//每页记录数	
			dataChanged:false
		}
	},
	components:{
       "Pager":Pager
	}
        methods:{
          refresh(){//用于刷新组件,需手动调用
     	      this.dataChanged = true
     	        this.$nextTick(() => {
     		    this.dataChanged = false
     	        })
           },
          gotoPage(page){
     	     ...
         },
         changeRowNum(pageSize){
     	        ...
           }
        }
  ...
}

好了,真的完了~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue实现分页组件

    分页需要的字段:当前页(curPage),每页大小(pageSize),总页数(total) 作为一个组件,所以以上这些参数最好是从父组件传递过来,可以如下定义...

    陨石坠灭
  • 《你不知道的js(上卷)》笔记2(this和对象原型)

    this关键字是javascript中最复杂的机制之一。它是一个很特别的关键字,被自动定义在 所有函数的作用域中。

    陨石坠灭
  • egret知(填)识(坑)点集

    替换控件,方法为dragonBones.Slot.setDisplay(dispaly:any),但是并不是每一次都能成功设置上,display也并不是一直有值...

    陨石坠灭
  • vue实现分页组件

    分页需要的字段:当前页(curPage),每页大小(pageSize),总页数(total) 作为一个组件,所以以上这些参数最好是从父组件传递过来,可以如下定义...

    陨石坠灭
  • this四种绑定方式之间的奇淫技巧

    写在前面 上一篇中,我们对于JavaScript中原始值、复杂值以及内存空间进行了一个深入浅出的总结,这次我们来聊一聊JavaScript中this关键字的深入...

    okaychen
  • 一个灰色APP逆向——初窥千万灰色直播产业

    从大约13年开始, 各大直播平台就如雨后春笋般冒出来, 犹记得当初还经常在午休时看DOTA的直播下饭. 后来不知道什么时候开始不再只是游戏直播, 而是一度刮起了...

    Python知识大全
  • Vue某些情况下 v-model绑定数据不实时更新解决办法

    有的时候我们变化data内的内容,console.log打印的时候是显示已经变化了的,但并没有渲染到界面上去。受 ES5 的限制,Vue.js 不能检测到对象属...

    kirin
  • 【面试需要】掌握JavaScript中的this,call,apply的原理

    掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb

    达达前端
  • ReactNative应用之汇率换算器开发全解析

        本篇博客将介绍如何开发一款简易的ReactNative小应用汇率换算器。本应用仅作为学习使用,其支持在人民币与美元间进行汇率计算。汇率计算器应用主要分为...

    珲少
  • VUE+WebPack游戏设计:欲望都市,构建类RPG游戏的开发

    望月从良

扫码关注云+社区

领取腾讯云代金券