今天研究了一下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>
複製代碼

最終結果：

附上本身的碼雲地址： gitee.com/kennana/eve…

以及我把這個組件部署到碼雲的gitPages上面了你們能夠訪問 kennana.gitee.io/vue_compone…