Vue分頁(yè)組件實(shí)現(xiàn)過程詳解

更新時(shí)間：2022年12月09日 16:29:44 作者：阿選不出來

Web應(yīng)用程序中資源分頁(yè)不僅對(duì)性能很有幫助，而且從用戶體驗(yàn)的角度來說也是非常有用的。在這篇文章中，將了解如何使用Vue創(chuàng)建動(dòng)態(tài)和可用的分頁(yè)組件

<template>
      <div class="paging" v-if="count">
        <ul>
            <li class="pre" v-show="page > 1" @click="jian()">
                <span>上一頁(yè)</span>
            </li>
            <li v-for="(item,index) in pageall" :key="index" 
            :class="{'active': page === item, 'ellipsis': item === '...'}" 
            @click="res_page(item)">
            {{item}}</li>
            <li class="next" v-show="page < totalPages" @click="jia()">
                <span>下一頁(yè)</span>
            </li>
        </ul>
        <span class="sum">共 {{totalPages}} 頁(yè), 跳至</span>
        <input type="text" @keyup.enter="activePage($event)">
        <span>頁(yè)</span>
    </div>
</template>

組件的一些規(guī)定和條件

我們可以把這個(gè)分頁(yè)組件分為三種形態(tài)

第一種總頁(yè)數(shù) <=5 的

我們規(guī)定當(dāng)總頁(yè)數(shù)小于5時(shí), 展示出所有的頁(yè)碼

第二種當(dāng)前頁(yè)為第一頁(yè)或最后一頁(yè)的

當(dāng)頁(yè)碼為第一頁(yè)或者最后一頁(yè)時(shí), 選擇性的消失上一頁(yè) 或下一頁(yè) 按鈕

第三種以上兩種都不是的

首先這個(gè)分頁(yè)組件需要得知三個(gè)條件

count(數(shù)據(jù)總數(shù)), page(當(dāng)前頁(yè)數(shù)), page_size(每頁(yè)展示的數(shù)量)

prop:['count','page','page_size']

注意: 由于子組件不能直接改變父組件的值, 所以在引用該分頁(yè)組件的父組件中,

可以寫入 :changePage.sync=“page”,

每當(dāng)page改變時(shí) 采用this.$emit(“changePage”, value) 傳入value來改變page

創(chuàng)建分頁(yè)數(shù)組

在Vue計(jì)算屬性中得出總頁(yè)數(shù) totalPages

totalPages(){
	return Math.ceil(this.count / this.paeg_size)
}

在Vue計(jì)算屬性中得出兩個(gè)值, beforePages afterPages 代表最小值與最大值(第一頁(yè)與最后一頁(yè)除外)

beforePages(){
	return this.page -2
}

afterPages(){   
    return this.page + 2
},

我們規(guī)定總是顯示當(dāng)前頁(yè)的前兩頁(yè)和后兩頁(yè).

重點(diǎn)來了, 在Vue屬性中創(chuàng)建分頁(yè)數(shù)組

添加第一頁(yè)和最后一頁(yè)

首先我們規(guī)定的beforePage=page-2, 當(dāng)beforepage > 1 時(shí), 即page > (1+2) , 這個(gè)時(shí)候就需要添加第一頁(yè) .

最后一頁(yè)同理

什么時(shí)候添加省略呢?

我們還規(guī)定當(dāng)totalPage總頁(yè)數(shù)小于等于5頁(yè)時(shí),展示所有頁(yè)碼 ,

當(dāng)totalPage > 5,并且beforePage=page-2>=3或者afterPage=page+2<=totalPage-2時(shí)添加省略.

當(dāng)totalPage < 5,如圖所示:

我們需要把前省略替換成2 后省略替換成4

pageall(){
    let arr=[]
    for(let everyPages = this.beforePages; everyPages <= this.afterPages; everyPages++) {
        if(everyPages > this.totalPages) {
            continue;
        }
        if(everyPages <= 0){
            continue;
        }
       arr.push(everyPages)
    }
    // 添加第一頁(yè)
    if(this.page > 3 {
        arr.unshift(1)
    }
    // 添加最后一頁(yè)
    if(this.page < this.totalPages-2) {
        arr.push(this.totalPages)
    }
    //添加前省略
    if(this.page >= 5) {
    	if(this.totalPages > 5) {
    		arr.splice(1,0,'...')
    	}else{
    		arr.splice(1,0,2)
    	}
    }
    //添加后省略
    if(this.page <= this.totalPages-4) {
    	if(this.totalPages > 5) {
    		arr.splice(arr.length-1,0,"...")
    	}else{
    		arr.splice(arr.length-1,0,4)
    	}
   }
    return arr
}

切換頁(yè)碼

現(xiàn)在數(shù)組已經(jīng)完成, 還需要添加上點(diǎn)擊切換頁(yè)碼的方法.

點(diǎn)擊下一頁(yè)????

jia(){
	this.$emit('update:changepage',  this.page + 1)
}

點(diǎn)擊上一頁(yè)????

jian(){
	this.$emit('update:changepage',  this.page - 1)
}

點(diǎn)擊任意一頁(yè)

res_page(value){
	if(value!=="..."){
		this.$emit('update:changepage',  value)
	}V
}

在輸入框內(nèi)輸入頁(yè)碼,按Enter鍵跳轉(zhuǎn)

activePage(e){
    if(e.target.value > this.totalPages) {
        this.$emit('update:changepage', this.totalPages)
    }else if(e.target.value <= 0) {
        this.$emit('update:changepage', 1)
    }else{
        this.$emit('update:changepage', e.target.value - 0)
    }
    e.target.value = ""
    e.target.blur()
}

CSS

最后附上CSS代碼

       .paging {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #657180;
            ul {
                padding: 5px;
                display: inline-flex;
                background-color: #FFF;
                li {
                    width: 40px;
                    height: 40px;
                    margin: 0 2px;
                    border-radius:5px;
                    border: 1px solid #d7dde4;
                    list-style: none;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    caret-color: transparent;
                    cursor:pointer;
                }
                li:first-child{
                    width: 80px;
                    border-radius: 40px 0 0 40px;
                    span {
                        color: #000000;
                    }
                }
                li:last-child{
                    width: 80px;
                    border-radius: 0 40px 40px 0;
                    span {
                        color: #000000;
                    }
                }
                li:hover {
                    color: #00a1d6;
                    transition: all 0.5s;
                    border-color: #00a1d6;
                }
                .ellipsis {
                    border: none;
                }
                .ellipsis:hover {
                    color: #657180;
                }
                .active{
                    background-color: #00a1d6;
                    color: #FFF;
                }
            }
            .sum {
                margin-left: 30px;
            }
            span{
                font-size: 13px;
                color: #99a2aa;
            }
            input {
                height: 30px;
                width: 60px;
                border-radius: 5px;
                border: 1px solid #d7dde4;
                margin: 0 10px;
                outline: none;
            }
        }

到此這篇關(guān)于Vue分頁(yè)組件實(shí)現(xiàn)過程詳解的文章就介紹到這了,更多相關(guān)Vue分頁(yè)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: