今天用vue來實現一個分頁組件,總體來說,vue實現比較簡單,樣式部分模仿了elementUI。所有代碼的源碼可以再github上下載的到:下載地址
先來看一下實現效果:
點擊可查看運行效果:線上地址
整體思路
我們先看一下使用到的文件的目錄:
我們在pageComponentsTest.vue
頁面引入了pageComponent.vue
分頁組件。整體思路是通過props
來達到組件的靈活通用的效果,整體語法是使用vue的VM語法。
pageComponent.vue實現
首先實現一個分頁,需要知道數據總條數,一個頁面顯示的數據條數和當前顯示第幾頁的數據。那麼我們在pageComponent.vue
裏面的props
就有了。看下面的代碼:
props: {
// 分頁配置
pageConfig: {
type: Object, require: true, default() {
return {
pageSize: 10, //一頁的數據條數
pageNo: 0, //當前頁的索引
total: 0, //總的數據條數
pageTotal: 0 //總的頁數
}
}
}
根據用戶入參,我們可以使用計算屬性來計算一個總頁數的變量:
computed: {
//計算總頁數,如果傳了pageTotal,直接取pageTotal的值,如果傳了total,那麼根據pageSize去計算
pageTotal(){
const config = this.pageConfig
if(config.pageTotal){
return config.pageTotal
}else {
if(config.pageSize && config.total){
return Math.ceil(config.total/config.pageSize)
}else {
return 0
}
}
}
}
有了總頁數,和當前頁,就需要各種判斷來實現我們的html部分了,這裏分4中情況
- 總頁數小於8,只需要直接遍歷到8就行了。
- 總頁數大於8,但當前頁小於4的。
- 總頁數大於8,當前頁靠後的。
- 總頁數大於8,當前頁在中間的。
下面看具體的實現:
<!--上一頁-->
<button @click="prePage" :disabled="currentPage === 1">上一頁</button>
<!--總頁數小於8的-->
<template v-if="pageTotal <= showPageNo">
<button v-for="i in pageTotal" @click="changeCurrentPage(i)" :class="{active:i === currentPage}" :key="i">{{i}}</button>
</template>
<template v-else-if="currentPage < 4">
<button v-for="i in 6" @click="changeCurrentPage(i)" :class="{active:i === currentPage}" :key="i">{{i}}</button>
<button :disabled="true">···</button>
<button>{{pageTotal}}</button>
</template>
<template v-else-if="currentPage > pageTotal - 4">
<button>1</button>
<button :disabled="true">···</button>
<button v-for="i in 6" @click="changeCurrentPage(i + (pageTotal - 6))" :class="{active:(i + (pageTotal - 6)) === currentPage}" :key="i">{{i + (pageTotal - 6)}}</button>
</template>
<template v-else>
<button>1</button>
<button :disabled="true">···</button>
<button @click="changeCurrentPage(currentPage - 2)">{{currentPage - 2}}</button>
<button @click="changeCurrentPage(currentPage - 1)">{{currentPage - 1}}</button>
<button class="active">{{currentPage}}</button>
<button @click="changeCurrentPage(currentPage + 1)">{{currentPage + 1}}</button>
<button @click="changeCurrentPage(currentPage + 2)">{{currentPage + 2}}</button>
<button :disabled="true">···</button>
<button @click="changeCurrentPage(pageTotal)">{{pageTotal}}</button>
</template>
<!--下一頁-->
<button @click="nextPage" :disabled="currentPage === pageTotal">下一頁</button>
可以看到頁面上需要實現3個方法,分別是上下頁,和點擊頁面的方法。
methods: {
prePage(){
this.currentPage -= 1
this.$emit('changeCurrentPage',this.currentPage)
},
nextPage(){
this.currentPage += 1
this.$emit('changeCurrentPage',this.currentPage)
},
changeCurrentPage(i){
this.currentPage = i
this.$emit('changeCurrentPage',this.currentPage)
}
}
以上就是pageComponent.vue
的大致實現了,每次頁面改變,都會觸發一個changeCurrentPage
方法的回調,用來通知當前使用組件的頁面當前頁已經改變。
pageComponentsTest.vue的實現
引用頁面就比較簡單了,只要傳入組件需要的對應的參數,就能顯示我們的組件了。
引用部分:
<template>
<div class="pageComponentsTest">
<page-component :page-config="pageConfigTotal" @changeCurrentPage="changePage"></page-component>
<page-component :page-config="pageConfigPageTotal"></page-component>
</div>
</template>
配合入參部分:
{
name: "pageComponentsTest",
data() {
return {
pageConfigTotal:{total:21,pageSize:10,pageNo:1},
pageConfigPageTotal:{total:21,pageSize:10,pageNo:1,pageTotal:50}
}
},
components:{'page-component':pageComponent},
methods: {
changePage(page){
this.pageConfigTotal.pageNo = page
}
}
}
總結
可以看到使用vue實現分頁組件整體來說是很容易了,比使用jQuery方便很多,使用vm模式開發前端的最明顯的一個好處是,能是數據mode部分與view頁面部分保持同步,而開發者不用考慮這個過程,所以整體來說簡單了很多。所有的源碼都能在git上下載。
最後可以關注我的個人公衆號,實時查看更多更好的文章: