一個可復用的vue分頁組件
更新時間：2021年09月26日 11:19:44 作者：azraelim
這篇文章主要為大家詳細介紹了一個可復用的vue分頁組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了可復用vue分頁組件的具體代碼，供大家參考，具體內容如下
不廢話，先上組件文件pages.vue:
<template>
<div class="pages-box" v-if="pageTotal > 0">
<ul class="pages">
<li class="pages-prev">
<a v-if="pageNow != 1" href="javascript:void(0);" @click="prevClick">上一頁</a>
</li>
<!--如果只有一頁就不顯示固定的第一個分頁按鈕了,避免重復-->
<template v-if="pageTotal > 1">
<li v-for="i in pageBegin" class="pages-li" :class="{active:i == pageNow}">
<span v-if="i == pageNow" v-text="i"></span>
<a v-else href="javascript:void(0);" @click="pageClick" v-text="i"></a>
</li>
</template>
<li v-if="ellipsis[0] > slider">
<span>...</span>
</li>
<li v-for="i in pageMiddle" class="pages-li" :class="{active:i == pageNow}">
<span v-if="i == pageNow" v-text="i"></span>
<a v-else href="javascript:void(0);" @click="pageClick" v-text="i"></a>
</li>
<li v-if="pageTotal - ellipsis[1] > slider">
<span>...</span>
</li>
<li v-for="i in pageEnd" class="pages-li" :class="{active:i == pageNow}">
<span v-if="i == pageNow" v-text="i"></span>
<a v-else href="javascript:void(0);" @click="pageClick" v-text="i"></a>
</li>
<li class="pages-next">
<a v-if="pageNow != pageTotal" href="javascript:void(0);" @click="nextClick">下一頁</a>
</li>
</ul>
</div>
</template>
<script>
export default{
name: 'pages',
props: {
//總頁數
total: {
type: [Number, String],
required: true
},
//當前頁
now: {
type: [Number, String],
default: 1
}
},
data() {
return {
//當前頁
pageNow: this.now,
//總頁數
pageTotal: this.total,
//輸入的頁碼
pageNum: "",
//顯示分頁按鈕的個數
length: 8,
//前后固定的分頁按鈕個數
slider: 1
}
},
watch: {
total(val){
let page_total = parseInt(val);
page_total = (isNaN(page_total) || page_total < 1) ? 1 : page_total;
this.pageTotal = page_total;
},
now(val){
let page_now = parseInt(val);
page_now = (isNaN(page_now) || this.pageTotal < 2 || page_now < 1) ? 1 : page_now;
page_now = page_now > this.pageTotal ? this.pageTotal : page_now;
this.pageNow = page_now;
}
},
computed: {
//前邊顯示固定分頁數
pageBegin(){
return Math.min(this.slider, this.ellipsis[0]);
},
//中間顯示分頁數
pageMiddle(){
let arr = [];
for (let i = this.ellipsis[0] + 1; i <= this.ellipsis[1]; i++) {
arr.push(i);
}
return arr;
},
//后邊顯示分頁數
pageEnd(){
let arr = [];
for (let i = this.ellipsis[2] + 1; i <= this.pageTotal; i++) {
arr.push(i);
}
return arr;
},
/**
* 出現三個點時的分頁的范圍
* @returns {*[]}
* begin: 開始頁碼
* end: 結束頁碼
* end_max: 結束頁碼的最大值
*/
ellipsis() {
let end_max = this.pageTotal - this.slider;
let begin = this.pageNow - (this.length / 2) + this.slider;
begin = begin < 1 ? 1 : begin;
let end = begin + this.length - 2 * this.slider;
//當begin達到最小值后需要根據begin重新計算end以保證顯示的分頁按鈕個數不變
end = begin < this.slider ? (end + this.slider - begin) : end;
if (end >= end_max) {
end = end_max;
//當end達到最大值后需要根據end重新計算begin以保證顯示的分頁按鈕個數不變
begin = (end - this.length + 2 * this.slider) < 1 ? 1 : (end - this.length + 2 * this.slider);
}
return [begin, end, end_max];
}
},
methods: {
//上一頁
prevClick() {
this.pageNow--;
this.pageNow = this.pageNow < 1 ? 1 : this.pageNow;
this.changePage(this.pageNow);
},
//下一頁
nextClick() {
this.pageNow++;
this.pageNow = this.pageNow > this.pageTotal ? this.pageTotal : this.pageNow;
this.changePage(this.pageNow);
},
//點擊頁碼
pageClick(e) {
this.pageNow = Number(e.target.innerText.trim());
this.changePage(this.pageNow);
},
//輸入頁碼
pageInput(e){
let num = parseInt(e.target.innerText);
if(isNaN(num)){
this.pageNum = '';
e.target.innerText = '';
} else {
this.pageNum = num;
//e.target.innerText = num;
}
},
//跳轉到輸入的頁碼
goClick() {
this.pageNum = this.pageNum < 1 ? 1 : this.pageNum;
this.pageNum = this.pageNum > this.pageTotal ? this.pageTotal : this.pageNum;
this.pageNow = this.pageNum;
this.pageNum = "";
this.changePage(this.pageNow);
},
// 切換分頁
changePage(page){
let {name, params, query} = this.$route;
this.$router.push({
name,
params: Object.assign(params, {page}),
query
});
}
}
}
</script>
<style lang="sass" type="text/scss" rel="stylesheet/scss">
@import '../scss/base/variables';
.pages-box{
position: relative;
padding: 5px 10px;
margin: 20px 0;
text-align: center;
}
.pages{
display: inline-block;
padding: 10px 0;
&:after{
content: "";
display: table;
line-height: 0;
clear: both;
}
li{
float: left;
height: 20px;
line-height: 20px;
text-align: center;
margin: 0 2px;
box-sizing: border-box;
font-size: 13px;
span, a{
display: block;
width: 100%;
height: 100%;
padding: 0 2px;
box-sizing: border-box;
}
}
.pages-li{
min-width: 30px;
border: 1px solid $theme;
color: $theme;
a{
color: $theme;
}
&.active{
span{
background: $theme;
color: #fff;
}
}
}
.pages-prev, .pages-next{
padding: 0 8px;
font-size: 12px;
a{
display: block;
height: 100%;
position: relative;
color: $theme;
&:before{
content: '';
position: absolute;
top: 50%;
display: block;
width: 6px;
height: 6px;margin-top:-4px;
border-left: 1px solid $theme;
border-top: 1px solid $theme;
}
}
}
.pages-prev a{
padding-left: 8px;
&:before{
transform:rotate(-45deg);
left: 0;
}
}
.pages-next a{
padding-right: 8px;
&:before{
transform:rotate(135deg);
right: 0;
}
}
.pages-num{
.num-input{
min-width: 20px;
height: 20px;
padding: 0 5px;
line-height: 20px;
border-radius: 2px;
border: 1px solid $theme;
color: $theme;
text-align: center;
outline: none;
}
}
.pages-go{
a{
color: $theme;
}
span{
color: #666;
}
}
}
</style>
使用方法：
在需要分頁的地方使用分頁組件標簽，比如這里的order.vue：
<!--分頁組件--> <pages :now="page" :total="totalPage" v-if="totalPage > 0"></pages>
在data中設置當前頁和總頁面的默認值
data(){
return {
totalPage:1,
page:1,
}
},
考慮一下我們希望我們點擊頁數按鈕后發(fā)生什么
首先，點擊某頁數時路由會改變頁數，從路由獲取當前頁
this.page = this.$route.params.page;
接著，我們希望有一個getorderfromServer方法將當前頁數發(fā)送給服務器，再將返回的數據更新在頁面上
getorderfromServer({
currentPage:this.page
})
最后調用的方法：
methods: {
// 查詢全部訂單
getorderfromServer(){
this.loading = true;
this.page = this.$route.params.page;
getorderfromServer({
currentPage: this.page,
orderTimeStart:this.orderTimeStart,
orderTimeEnd:this.orderTimeEnd,
serviceName:this.serviceName,
shopName:this.shopName,
status: this.status
}).then(({code, data}) => {
if (code == 200) {
this.Orderlist = data.list;
this.totalPage = data.totalPage;
}
this.loading = false;
}).catch(err => {
this.tip('服務內部錯誤', 'error');
this.Orderlist = {};
this.loading = false;
});
},
}
注意通過路由對方法作出響應，每次路由改變都調用此方法以更新頁面
watch: {
$route: 'getorderfromServer'
}
還要對路由信息進行改造，讓每一頁（尤其是第一頁）都有路由頁數信息，可以對第一頁進行重定向以達到目的：
{
path: 'order',
redirect: 'order/page/1',
},
{
path: 'order/page/:page',
component(resolve){
require.ensure([], function (require) {
resolve(require('../modules/personal/order/myorder.vue'));
}, 'modules/personal')
},
name:'order',
meta: {
login: 'none'
}
},
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue實現廣告欄上下滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家詳細介紹了Vue自定義可以選擇日期區(qū)間段的日歷插件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue項目中使用setTimeout存在的潛在問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了Vue路由history模式解決404問題的幾種方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Upload?上傳文件這個功能是我們在企業(yè)實際開發(fā)當中使用頻率是非常高的這樣一個文件上傳的功能,element?ui組件組也給我們提供了上傳的組件,本文給大家介紹el-upload?文件上傳組件的使用,感興趣的朋友跟隨小編一起看看吧2024-02-02
Vue.js中使用最多的兩個指令就是v-if和v-for,下面這篇文章主要給大家介紹了關于Vue3中v-if和v-for優(yōu)先級的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
vxe-table 是一個功能強大的 Vue 表格組件,它支持虛擬滾動列表作為其核心功能之一,本文主要介紹一下vxe-table的虛擬滾動列表功能的使用場景和優(yōu)勢,感興趣的可以了解下2023-12-12
原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等類型的值，在 JavaScript 中，原始值是按值傳遞的，引用類型是按引用傳遞的，這意味著，如果一個函數接收了一個原始值作為參數，那么形參和實參之間是沒有引用關系的，它們是完全獨立的兩個值2023-01-01
這篇文章主要介紹了vue接入下載文件接口問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
這篇文章主要介紹了vant picker+popup 自定義三級聯動案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11