|
まずは、最後のレンダリングの波から: ![]()
基本要素まず、ページャーコンポーネント(以下「ページャーコンポーネント」と呼びます)が一般的に所有する要素は以下の通りです: 先の 1ページ 中央に示されたページ番号 最後のページ 次に
初期化に必要な構成は以下の通りです: これらはVueの小道具を通じて受信可能です。 さらに、ページャーコンポーネント自体には現在のページを記録するcurrentPageが必要で、ページ配列は中央に表示されるページ番号に対応するために使われ、jumpPageはジャンプページ番号入力をバインドします。 基本実現対応するコードは以下の通りです:
<template>
<div class="pager-wrapper" v-if="totalPage > 0">
<div class="pager-pages">
<a v-show="currentPage > 1 && showPrev" @click="go(currentPage - 1)" >前のページ</a>
<a :class="{active: currentPage == 1 ? true : false}" @click="go(1)">1</a>
<strong v-show="pages[0] > 2">...</strong>
<a v-for="page in pages" :class="{active: currentPage == page ? true : false}" @click="go(page)">{{page}}</a>
<strong v-show="pages[pages.length-1] < totalPage - 1">...</strong>
<a v-if="totalPage > 1" :class="{active: currentPage == totalPage ? true : false}" @click="go(totalPage)">{{totalPage}}</a>
<a v-show="currentPage < totalPage && showNext" @click="go(currentPage + 1)" > next page</a>
</div>
<div v-if="showJump" v-show="totalPage > 1" class="pager-jump">
<span>Total S Mass< class="jump-total">{{totalPage}}</em> ページ、ジャンプ</span>
<input type="number" min="1" :max="totalPage" v-model="jumpPage" class="jump-input">
<span>ページ</span>
<a @click="go(jumpPage)" > 確定</a>
</div>
</div>
</template>
<script>
エクスポートデフォルト {
プロップス:{
totalPage: { // 総ページ数
タイプ:数、
デフォルト:1、
必須:真
},
showItems: { // 表示ページ数、例:1 ... 34[5]67 ... 10
タイプ:数、
デフォルト:5
},
showPrev: { // 「Previous」を表示するかどうか
タイプ:ブール値、
デフォルト:真
},
showNext: { // 「Next」を表示するかどうか
タイプ:ブール値、
デフォルト:真
},
showJump: { // 「Jump」を表示するかどうか
タイプ:ブール値、
デフォルト:真
},
initPage: {
タイプ:数、
デフォルト:1
}
},
データ() {
返す {
currentPage: 0,
ページ数: [],
ジャンプページ:0、
}
},
created() {// initialization 時のcurrentPage割り当て
this.currentPage = this.initPage
}
方法: {
ゴー(ページ) {
if(ページ< 1) {
ページ = 1
}
if(page > this.totalPage) {
ページ = this.totalページ
}
if(page === this.currentPage) {
帰還
}
this.currentPage = parseInt(page,10)
this.$emit('go-page',{
ページ:this.currentPage
})
}
},
見て:{
currentPage (newVal) {
this.jumpPage = newVal
},
initPage (newVal) {
if(this.currentPage !== newVal) {
this.currentPage = newVal
}
}
}
}
</script>
次のステップは、ページ配列の値を取得する方法です。 ページは常に現在のページおよび設定で表示が必要なshowItemsと強く関連しているため、計算されたプロパティに変更することも十分可能です:
computed: {
ページ数() {
ページ番号配列は、開始ページ番号と終了ページ番号に基づいて得られます
let getPages = (start, end) => {
if(start <= 1 || start > end || start >= this.totalPage) {
スタート = 2
}
if(end >= this.totalPage || end < start || end <= 1) {
終わり = this.totalページ - 1
}
arr = []
for(let i = start; i <= 終わり; i++) {
arr.push(i)
}
戻るARR
}
let counts = this.showItems
if(this.totalPage < counts + 2) {
返却 getPages(2,this.totalPage)
} そうでなければ {
if(this.currentPage <= Math.ceil(counts/2)) {
返却 getPages(2,カウント)
} そうでなければ(this.currentPage >= this.totalPage - Math.floor(counts/2)) {
返却 getPages(this.totalPage + 1 - カウント、this.totalPage - 1)
} そうでなければ {
半分 = Math.ceil(counts/2) - 1
end = this.currentPage + half
if(counts % 2 === 0) {
終わり++
}
return getPages(this.currentPage - 半分、終わり)
}
}
}
}
機能拡張この時点で、通常のページめくりコンポーネントが基本的に実装されます(スタイルは単独でカスタマイズ可能です)。 しかし、多くの場合(特に一部のマネジメントバックグラウンドでは)、Vueルーターと組み合わせてSPAを作成する場合、通常は次のような要件があります。 特定のリストのページにページをめくった後、項目をクリックして編集ページに進み、編集後にジャンプする前にそのページに戻れるようにしたいです。
上記のページャーコンポーネントだけを使う場合、この要件は実装があまり便利ではありません。 Vuexを組み合わせても問題ないと言う人もいますが、この場合、ジャンプ前にページ番号を記録する必要があります。 ページをめくるリストが多数ある場合、複数ページを記録するのは明らかに優雅とは言えません。 しかし、Vue-Routerの実装の洗練さゆえに、上記の要件を満たすのは簡単です。
まず、プロップにモード構成を追加します。モードがパラメータの場合、ジャンプはどのルート上にあるかを知る必要があるので、次のようになります。
mode: {
タイプ:文字列、
デフォルト: 'Event' // 'Event' | 「クエリ」 | 「params」
},
routeName: {
タイプ:ストリング
}
そして実際のジャンプロジックメソッド(go(page))でいくつか変更を加えてください:
ゴー(ページ) {
if(ページ< 1) {
ページ = 1
}
if(page > this.totalPage) {
ページ = this.totalページ
}
if(page === this.currentPage) {
帰還
}
this.currentPage = parseInt(page,10)
if(this.mode == 'query') {
query = this.$route.query とします
query.page = this.currentPage
this.$router.go({query: query})
} else(this.mode == 'params') {
params = this.$route.params とします。
params.page = this.currentPage
this.$router.go({name: this.routeName, params: params})
} そうでなければ {
this.$emit('go-page',{
ページ:this.currentPage
})
}
}
これは基本的にシンプルで普遍的なページめくりコンポーネントを完成させており、すべての人がリポジトリに送ることはできません。
この記事でついに実装されたページめくりコンポーネントがリリースされ、ソースコードの波が見られます:
Vue-simple-pager
| 
掲載地 2019/07/25 16:12:31
|
|
|
