今天研究了一下vue分頁外掛

最近想實現一個移動端部落格，可能會用到分頁外掛，於是在網上找了一圈，也沒找到合適的vue分頁外掛，於是乎自己也研究了一下分頁外掛的功能，上圖，上圖


其中css樣式使用less動態編譯樣式

<style lang="less">
.pagination{
	overflow: hidden;
    display: table;
    margin: 0 auto;
    /*width: 100%;*/
    li {
    	list-style: none;
    	float: left;
    	height: 30px;
    	border-radius: 5px;
    	margin: 3px;
    	color: #999;
    	background: rgb(240, 242, 245);
    	line-height: 30px;
    	&:hover{
    		background: rgb(25, 137, 250);
    		a {
    			background: rgb(25, 137, 250);
    			color: #fff;
    		}
    	}
    	a {
    		display: block;
		    width: 30px;
		    height: 30px;
		    text-align: center;
		    line-height: 30px;
		    font-size: 14px;
		    border-radius: 5px;
		    text-decoration: none;
		    color: #999;
    	}
    }
    .active {
		background: rgb(25, 137, 250);
		a {
			color: #fff;
		}
	}
}	
</style>

外掛頁面的html

<template>
<nav>
	<ul class="pagination">
		<li :class="{'disabled': (current==1)}"><a @click="setCurrent(current-1)" href="javascript:void(0)"> « </a></li>
		<li :class="{'disabled': (current==1)}"><a @click="setCurrent(1)" href="javascript:void(0)"> 首頁 </a></li>
		<li v-for="(p,index) in grouplist" :key="index" :class="{'active': (current==p.val)}"><a @click="setCurrent(p.val)" href="javascript:void(0)"> {{ p.txt }} </a></li>
		<li :class="{'disabled': (current==page)}"><a @click="setCurrent(page)" href="javascript:void(0)"> 尾頁 </a></li>
		<li :class="{'disabled': (current==page)}"><a @click="setCurrent(current+1)" href="javascript:void(0)"> » </a></li>
	</ul>
</nav>	
</template>

外掛的邏輯js

<script>
 // eslint-disable-next-line
 /* eslint-disable */
export default {
	data() {
		return {
			current: this.currentPage,
		}
	},
	props: {
		// 數目總條數
		total: {
			type: Number,
			default: 0
		},
		// 每一頁顯示10條資料
		display: {
			type: Number,
			default: 10,
		},
		// 當前處於哪一頁
		currentPage: {
			type: Number,
			default: 1,
		},
		// 分頁數目
		// 預設可視為5頁
		pagegroup: {
			type: Number,
			default: 5,
		}
	},
	// 如何計算總頁數
	// 總頁數目是隨著後臺資料的變化而變化的所以需要計算屬性，實時計算
	computed: {
		// 獲取總頁數
		page() {
			return Math.ceil(this.total / this.display);
		},
		// 獲取頁碼
		grouplist() {
			// 總頁數
			let len = this.page,
				// 距離中間那個數的偏移量
				count = Math.floor(this.pagegroup / 2),
				// 以當前頁為中間數
				center = this.current,
				// 臨時陣列
				temp = [],
				// 返回的陣列
				list = [];
			// 判斷當總頁數<=分頁數的情況
			if(len <= this.pagegroup){
				while(len--){
					temp.push({
						txt: this.page-len,
						val: this.page-len
					})
				}

				return temp;
			}
			// 否則就是len>分頁數目的情況
			while(len--){
				temp.push(this.page-len);
			}
			// 找出當前頁在這個資料中位置
			let idx = temp.indexOf(center);
			// 判斷這個位置與中間偏離的大小
			// 計算出中間值
			(idx < count) && (center = center + count - idx);
			(this.current > this.page - count) && (center = this.page - count)
			// 從當前位置減去偏移量再減去1就是陣列索引，
			// 獲取this.pagegroup長度陣列
			temp = temp.splice(center - count - 1, this.pagegroup);

			do{
				// 拼接資料
				let t = temp.shift();
				list.push({
					txt: t,
					val: t
				})
			}while(temp.length)

			// 接著判斷陣列是否到達處於中間
			if (this.page > this.pagegroup) {
	          (this.current > count + 1) && list.unshift({txt: '...', val: list[0].val - 1});
	          (this.current < this.page - count) && list.push({txt: '...', val: list[list.length - 1].val + 1});
	        }
	        return list;
		}
	},
	methods: {
		setCurrent(idx) {
			if (this.current != idx && idx > 0 && idx < this.page + 1) {
				// 判斷當前頁碼不等於本身，和大於零，而且要小於總頁數的時候，才觸發
	          this.current = idx;
	          this.$emit('pagechange', this.current);
	        }
		}
	}
}
</script>

外掛的引用

<template>
	<v-pagination :total="total" :display="display" :current="current" @pagechange="pagechange"></v-pagination>
</template>

<script>
 // eslint-disable-next-line
 /* eslint-disable */
import mypagination from "@/my-pagination/my-pagination"
export default {
	components: {
		"v-pagination": mypagination,
	},
	data() {
		return {
			total: 200,
			display: 10,
			current: 1,
		}
	},
	methods: {
		pagechange(idx){
			console.log(idx)
		}
	}
}
</script>

<style lang="less">
	
</style>

最終結果：

附上自己的碼雲地址：

以及我把這個元件部署到碼雲的gitPages上面了大家可以訪問