個人筆記013--vue分頁組件的實現

最近項目中用到分頁功能，而且領導還各種要求，自己就寫了一個分頁組件，然後因爲剛開始總記錄數的請求是異步請求，直接綁定子組件的話傳值不成功，所以應用了bus.js作爲中間件傳值，因爲最近比較忙，下面直接上代碼：

page組件：

<template>
		<!--分頁組件-->
			<div class="page">
				<div style="display: inline-block;min-width: 150px;">
					<ul class="pagination" v-if="currs!=0">
						<li v-if="current == 1"  style="cursor: not-allowed;">
							<i class="el-icon-arrow-left"></i>
						</li>
						<li v-else @click="goto('plus')" class="li-hover">
							<i class="el-icon-arrow-left"></i>
						</li>
						<li v-for="index in pages" @click="goto(index)" class="li-hover" :key="index" :style=" index == current? 'color: #fff;background:' + colorselects : '' ">
							<template v-if="index/2">
								{{ index }}
							</template>
							<template v-else>
								<i class="el-icon-more"></i>
							</template>
						</li>
						<li v-if="currs != current && currs != 0 " @click=" goto('add') " class="li-hover">
							<i class="el-icon-arrow-right"></i>
						</li>
						<li v-else style="cursor: not-allowed;">
							<i class="el-icon-arrow-right"></i>
						</li>
					</ul>
				</div>
			</div>
</template>

<script>
	export default{
		name:'page',
		data() {
			return {
				showSize:10,//顯示頁標題個數根據這個確定
				pageSize:15,//每頁的記錄
				current:1,//當前頁碼
				currs:0,//總頁數
			}
		},
		computed:{
			// 獲取當前的主題顏色,不需要的話可以去掉
			colorselects(){
				return this.$route.matched[0].meta.colorselect;
			},
			//			分頁數據
			pages: function() {
				var pag = [];
				if(this.currs < this.showSize) { //如果當前的激活的項 小於要顯示的條數
					//總頁數和要顯示的條數那個大就顯示多少條
					var i = Math.min(this.showSize,this.currs);
					while(i) {
						pag.unshift(i--);
					}
				} else { //總頁數大於要顯示的條數
					pag.push(1)
					var i  = Math.ceil(this.showSize/2), middle = 2;
					if (this.current < Math.ceil(this.showSize/2)) {//當前頁碼屬於前面幾個
						while(i--) pag.push(middle++);
						pag.push('right')
					} else if (this.current > this.currs - (Math.ceil(this.showSize/2) - 1)) {//當前頁碼屬於後面幾個
						pag.push('left')
						middle = this.currs - i;
						while(i--) pag.push(middle++);
					} else {//當前頁碼屬於中間那段
						pag.push('left')
						middle = this.current - 2;
						while(i--) pag.push(middle++);
						pag.push('right')
					}
					pag.push(this.currs)
				}
				return pag
			}
		},
		methods: {
				//點擊獲取分頁數據
			goto: function(index) {
				if (this.current == index) return
				// 根據傳進來的值判斷操作
				switch (index) {
					case 'left':
						this.current = Math.ceil(this.current/2)
						break;

					case 'right':
						this.current = Math.ceil(this.currs/2 + this.current/2)
						break;

					case 'plus':
						this.current --
						break;

					case 'add':
						this.current ++
						break;

					default:
						this.current = index;
						break;
				}
				// 向父組件傳當前頁碼
				this.$emit('current',this.current);
			},
			// 獲取父組件傳過來的值
			getData(currs,pageSize,current){
				this.currs = currs ? currs : 0;
				this.pageSize = pageSize;
				this.current = current;
			}
		},
		created(){
			this.$bus.on('doPage',this.getData)
		},
		beforeDestroy(){
			this.$bus.off('doPage',this.getData)
		},
	}
</script>
<style scoped="scoped">
	.page{
		text-align: center;
		margin: 10px 0;
	}
	.pagination {
		margin: 0 auto;
		text-align: center;
		overflow: hidden;
	}
	.pagination li {
		cursor: pointer;
		float: left;
		margin: 0 5px;
		font-size: 14px;
		font-weight: 700;
		height: 28px;
    	line-height: 28px;
		background-color: #f4f4f5;
		color: #606266;
		min-width: 30px;
		border-radius: 2px;
	}
	.li-hover:hover {
		color: #7A98F7;
	}
	
	.pagination li.actives{
		background: #9E071D;
		color: #fff;
	}
</style>

bus.js

const install = (Vue) => {
    const Bus = new Vue({
        methods:{
            emit (event,...args){//發送數據
                this.$emit(event,...args)
            },
            on (event,callback){//綁定
                this.$on(event,callback)
            },
            off (event,callback){//解綁
                this.$off(event,callback)
            },
        }
    })

    Vue.prototype.$bus = Bus
} 
export default install

在main.js中引入：

import VueBus from './api/bus.js'

Vue.use(VueBus)

最後在相應的頁面中引入page.vue子組件：

template中：<child @current='getCurrent'></child>

data中：

thisPage: '1', //當前頁碼

perPage: '6', //每頁記錄數

currs:'',//總頁數

methods中：

// 獲取頁面組件傳過來的值

getCurrent(data){

this.thisPage = data;

this.getData();

},

getData(){

請求成功後：

this.currs = Math.ceil(response.data.page.sumRecord/this.perPage)//這個根據後臺返回來的具體再操作

this.$bus.emit('doPage',this.currs,this.perPage,this.thisPage)

}