vue实现的分页组件（进行了小修改）

最新推荐文章于 2024-06-19 10:54:10 发布

xiazeqiang2018

最新推荐文章于 2024-06-19 10:54:10 发布

阅读量1.1k

点赞数

分类专栏： Vue的学习与使用文章标签： vue 分页组件

Vue的学习与使用专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
	</head>
	<style>
			li{
				list-style: none;
				display: inline-block;
			}
			span{
				display: inline-block;
				width: 30px;
				height: 30px;
				border: 1px solid indianred;
				line-height: 30px;
				text-align: center;
			}
			span:hover{
				background-color: #DDDDDD;
				cursor: pointer;
			}
			[v-cloak] {
			  	display: none;
			}
			.active{
				background-color: deepskyblue;
				color: #FFFFFF;
			}
		</style>
	
	<body>
		
		<div id="page">
			<ul >
				<li v-show="current!=1" @click="current--"><span><<</span></li>
				<li  v-for="index in pages" @click="current=index" :class="{'active':current==index}"><span v-cloak>{{index}}</span></li>
				<li v-show="current!=total && total!=0" @click="current++"><span>>></span></li>
			</ul>
		</div>
	
	</body>
	
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
	<script>
	new Vue({
		el:'#page',
		data:{
			current:1, //当前页
			total:12,   //总页数
			showItem:5  //最多展示的页码数
		},
		computed:{
			pages(){
			    var page=[];//显示页码
			    //思想：用当前激活页面驱动页面显示的分别
			    if(this.current<this.showItem){//当前页小于最大页码数（showItem），区分总页数是否达到最大页码数
			    	//获取总页数和最大页码数较小的值
			    	var i=Math.min(this.total,this.showItem);
			    	while(i){
			    		//通过page的数组值显示页码
			    		page.unshift(i--);
			    	}
			    }else{//当前页面大于最大页码数（showItem）时，区分显示的页码规则
			    	var pagestart=this.current-Math.floor(this.showItem/2);//获取显示的页码第一位页码（默认当前页居中）
			    	var i=this.showItem;//用来显示多少（i）个页码
			    	if(pagestart>(this.total-this.showItem)){//第一个页码如果大于总页数减去展示的页码数，则当前页不能居中
			    		pagestart=(this.total-this.showItem)+1;//应该显示的第一个页码数
			    	}
			    	while(i--){
			    		//通过page的数组值显示页码
			    		page.push(pagestart++);
			    	}
			    }
			    return page;
			}
		}
	})
</script>
</html>

效果图如下：