vue实现分页源码

小女子不才，自定义的分页，若有不当之处还望大佬指正，有更好的方法还望留言
一、html

<template>
	<div class="content">
		<div class="data-content">
			内容展示区域
		</div>
		//以下为分页样式及事件调用
		<div class="page-warpper">
			<div class="page page-china page-pre" @click="toPrePage">上一页</div>
			<div class="page" v-if="(currentPage > pageCount)||(minPage>1)">···</div>
			<template v-for="(item,index) in indexs">
				<div class="page" 
				:class="[item.isShow?'active':'']"
				@mouseover="mouseOver(index)"
				@mouseleave="mouseOut(index)"
				@click="toPage(index)">{{item.number}}</div>
			</template>			
			<div class="page" v-if="(totalPages > pageCount)&&(currentPage<totalPages)">···</div>
			<div class="page page-china page-next" @click="toNextPage">下一页</div>
		</div>
	</div>
</template>

二、css 根据个人喜好，自定义样式

<style scoped>
	.page-warpper{
		display: flex;
		flex-flow: row;
		justify-content: center;
		align-items: center;
		width: 100%;
	}
	.page{
		width: 34px;
		height: 34px;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		font-size: 16px;
		color: #333333;
		margin: 0 5px;
		border: 1px solid #999999;
		border-radius: 6px;
		cursor: pointer;
	}
	.page.page-china{
		width: 80px;
	}
	.page.active{
		background-color: #D6E9C6;
		color: #F0AD4E;
	}
	.page.page-china:hover{
		background-color: #D6E9C6;
		color: #F0AD4E;
	}
</style>

三、重要的js

<script>
	export default{
		data(){
			return{
				pageCount:4, //一组显示多少个分页数字
				currentPage:1, //当前点击的页码
				toatalNum:8, //数据返回的总条数，我这里好像没有用到，纯做记录了
				pageSize:1, //一页显示多少条数据，后台接口调用时需要
				totalPages:8, //返回的总页数
				indexs:'', //循环得到当前需要显示的页码的数组对象
				minPage:'', //当前显示页码的最小页码
				data:'' //接口返回数据
			}
		},
		mounted(){
			var that = this
			that.setPageNumber() //设置默认显示页码数从1开始
		},
		methods:{
			setPageNumber(){
				var that = this
				that.indexs = [];
				var long = that.currentPage + that.pageCount;
				for(var i = that.currentPage;i<long;i++){
					if(i == that.currentPage){
						that.indexs.push({
							isShow : true,
							number : i
						})
					}else{
						that.indexs.push({
							isShow:false,
							number:i
						})
					}					
				}
			},
			mouseOver(index){ //鼠标移入事件
				var that = this
				that.indexs[index].isShow = true
			},
			mouseOut(index){//鼠标移出事件
				var that = this
				if(that.indexs[index].number != that.currentPage){
					that.indexs[index].isShow = false
				}				
			},
			toPage(index){//点击页面时触发的事件
				var that = this
				that.indexs[index].isShow = true;
				that.indexs.forEach((e,i)=>{
					if(e.number == that.currentPage){
						e.isShow = false
					}
				})
				that.currentPage = that.indexs[index].number
				that.minPage = that.indexs[0].number
			},
			toNextPage(){//点击下一页时触发的事件
				var that = this
				if(that.currentPage < that.totalPages){
					that.indexs.forEach((e,i)=>{
						if(e.number == that.currentPage){
							e.isShow = false
						}
					})
					that.currentPage++
				}else{
					that.currentPage = that.totalPages
					that.minPage = that.indexs[0].number
					return
				}
				if(that.currentPage > that.pageCount){
					that.indexs = [];
					var i = that.currentPage - that.pageCount+1
					for(i;i<=that.currentPage;i++){
						if(i == that.currentPage){
							that.indexs.push({
								isShow : true,
								number : i
							})
						}else{
							that.indexs.push({
								isShow : false,
								number : i
							})
						}
					}
				}
				that.indexs.forEach((e,i)=>{
					if(e.number == that.currentPage){
						e.isShow = true
					}
				})
				that.minPage = that.indexs[0].number				
			},
			toPrePage(){//点击上一页时触发的事件
				var that = this
				if(that.currentPage > 1){					
					that.indexs.forEach((e,i)=>{
						if(e.number == that.currentPage){
							e.isShow = false
						}
					})
					that.currentPage--
					if(that.currentPage >= that.indexs[0].number){
						that.indexs.forEach((e,i)=>{
							if(e.number == that.currentPage){
								e.isShow = true
							}
						})
						that.minPage = that.indexs[0].number
						return
					}
					var i = that.currentPage					
					var long = that.currentPage + that.pageCount;		
					that.indexs = [];
					for(i;i<long;i++){
						if(i==that.currentPage){
							that.indexs.push({
								isShow : true,
								number : i
							})
						}else{
							that.indexs.push({
								isShow : false,
								number : i
							})
						}
					}
					that.minPage = that.indexs[0].number
				}else{
					that.currentPage = 1
					that.minPage = that.indexs[0].number
					return
				}
			}
		}
	}
</script>