：Pagination组件
Posted anyRTC
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了：Pagination组件相关的知识，希望对你有一定的参考价值。
大家好今天的内容是基于vue3实现自己的组件库系列第二章,本文默认你会安装和创建vue3项目，如果不会请参考vue官网；
Pagination.vue Template
v-select 组件可以先注释掉v-input 组件可以先注释掉
<div class='v-pagination'>
<div v-for='(item, index) in layout' :key='index'>
<div class='v-pagination-select-box' v-if='item === "switch"'>
<v-select
v-model='activePageSize'
:options='pageSizes'
:disabled='disabled'
@change='handleSizeChange'>
</v-select>
</div>
<v-pages
v-if='item === "pages"'
ref='cpages'
:total='total'
:pagerCount='pagerCount'
:pageSize='pageSize'
v-model='cCurrentPage'
:prependText='prependText'
:suffixText='suffixText'
:hideOnSinglePage='hideOnSinglePage'
:disabled='disabled'
:background='background'
@prev-click='handlePrevClick'
@next-click='handleNextClick'
></v-pages>
<div :class='["v-pagination-input-box", disabled ]' v-if='item === "jump"'>
<span>前往</span>
<v-input placeholder='' :disabled='disabled' v-model='jumpValue' @input='handleInput' @change='handleChange'></v-input>
<span>页</span>
</div>
</div>
</div>
Pagination.vue Script
import VairPagination from '../../types/pagination';
import vPages from './components/Pages';
import vSelect from '../Select/Select';
import vInput from '../Input/Input';
import ref, computed, watchEffect, watch from 'vue';
export default
name: 'pagination',
components:
vPages,
vSelect,
vInput
,
props: VairPagination,
setup (props, ctx)
const reg = /^\\+?[1-9][0-9]*$/;
const activePageSize = ref('');
const oldJumpValue = ref(props.currentPage);
const jumpValue = ref(props.currentPage);
const cCurrentPage = ref(props.currentPage);
const cpages = ref(null);
const pageSizes = computed(() =>
if (Array.isArray(props.pageSizes))
let arr = [];
props.pageSizes.forEach((item, index) =>
if (!reg.test(item))
throw new Error('page-sizes the item It has to be an integer greater than or equal to 1');
arr.push(
label: `$item条 / 页`,
value: index,
number: item
);
);
return arr;
else
throw new TypeError(`page-sizes wants to receive an array, but received a $typeof props.pageSizes`);
);
const handleSizeChange = (option) =>
ctx.emit('size-change', option.number);
;
const handlePrevClick = (index) =>
ctx.emit('prev-click', index);
setJumpValue();
;
const handleNextClick = (index) =>
ctx.emit('next-click', index);
setJumpValue();
;
const handleInput = (value) =>
if (!reg.test(value) && value !== '')
jumpValue.value = oldJumpValue.value;
else
oldJumpValue.value = value;
;
const handleChange = (value) =>
const max = Math.ceil(props.total / props.pageSize);
if (value < 1)
jumpValue.value = 1;
oldJumpValue.value = 1;
else if (value > max)
jumpValue.value = max;
oldJumpValue.value = max;
cCurrentPage.value = +jumpValue.value;
;
const setJumpValue = () =>
jumpValue.value = cCurrentPage.value;
oldJumpValue.value = cCurrentPage.value;
;
watchEffect(() =>
activePageSize.value = pageSizes.value[0].label;
);
watchEffect(() =>
if (!reg.test(props.pagerCount) || props.pagerCount < 7 || props.pagerCount > 21)
throw new TypeError(`pager-count value of can only be an integer greater than or equal to 7 and less than or equal to 21, but received a $props.pagerCount`);
);
watchEffect(() =>
if (!reg.test(props.pageSize))
throw new Error('pager-size It has to be an integer greater than or equal to 1');
);
watch(() => props.pageSize, () =>
setJumpValue();
);
watchEffect(() =>
if (!reg.test(props.currentPage))
throw new Error('current-page It has to be an integer greater than or equal to 1');
else
cCurrentPage.value = props.currentPage;
);
watchEffect(() =>
if (typeof props.total !== 'number' || props.total < 0)
throw new Error('total must be a number greater than or equal to 0');
);
watchEffect(() =>
ctx.emit('current-change', cCurrentPage.value);
setJumpValue();
);
return
handleSizeChange,
handlePrevClick,
handleNextClick,
handleInput,
handleChange,
pageSizes,
activePageSize,
jumpValue,
cCurrentPage,
cpages
Pagination.vue Props
const VairPagination =
background: // 是否开启背景色
type: Boolean,
default: () =>
return false;
,
pageSize: // 每页显示几条数据
type: Number,
default: () =>
return 10;
,
total: // 数据总数量
type: Number,
default: () =>
return 0;
,
pagerCount: // 当总页数超过该值时会开启折叠 最低为 7
type: Number,
default: () =>
return 7;
,
pageSizes: // 每页显示个数选择器的选项
type: Array,
default: () =>
return [10, 20, 30, 40, 50, 100];
,
prependText: // 后退按钮文字
type: String,
default: () =>
return '';
,
suffixText: // 前进按钮文字
type: String,
default: () =>
return '';
,
disabled: // 是否禁用
type: Boolean,
default: () =>
return false;
,
hideOnSinglePage: // 只有一页时是否隐藏
type: Boolean,
default: () =>
return false;
,
currentPage: // 当前页数
type: Number,
default: () =>
return 1;
,
layout: // 组件布局显示顺序
type: Array,
default: () =>
return ['switch', 'pages', 'jump'];
,
;
// Event
// size-change (number)
// current-change (index)
// prev-click (index)
// next-click (index)
export default VairPagination;
Pagination.vue Style
<style lang='less' scoped>
.v-pagination
display: flex;
align-items: center;
.v-pagination-select-box, .v-pagination-input-box
width: 120px;
/deep/.v-select, /deep/.v-input
min-width: 0;
/deep/.v-input
height: 30px;
.v-input-box, .input
height: 30px;
.suffix
height: 25px;
.v-pagination-input-box
display: flex;
align-items: center;
width: 120px;
/deep/.v-input
width: 50px;
margin: 0 6px;
.input
text-indent: 0px;
text-align: center;
span
font-size: 14px;
.disabled
cursor: not-allowed;
span
color: #c0c4cc;
</style>
Pages.vue Template
<div class='v-pages' ref='cPages'>
<div :class='["prepend", prependDisabled , disabled ]'
ref='prepend'
@click='handlePrependClick'>
<p v-if='prependText'> prependText </p>
<i v-if='!prependText' class='iconfont icon-zuojiantou'></i>
</div>
<ul class='v-pages-ul'>
<li :class='["v-pages-li", activeLi: modelValue === item , disabled ]'
:ref='el => if (el) liList[index] = el'
v-for='(item, index) in calculatePagesButtonList' :key='index'
@click='handlePagesLiClick(item)'>
<span :class='[ color: !background ]' v-if='item !== "suffix" && item !== "prepend"'> item </span>
<i @mouseenter='handleMouseEnter(item)'
@mouseleave='handleMouseLeave(item)'
@click='handleIClick(item)'
v-else
:class='["iconfont", "icon-ellipsis2",
"icon-chevronsrightshuangyoujiantou": doubleRight && item === "suffix" ,
"icon-chevronsleftshuangzuojiantou": doubleLeft && item === "prepend" ]'>
</i>
</li>
</ul>
<div
ref='suffix'
:class='["suffix", suffixDisabled , disabled ]'
@click='handleSuffixClick'>
<p v-if='suffixText'> suffixText </p>
<i v-if='!suffixText' class='iconfont icon-youjiantou'></i>
</div>
</div>
Pages.vue Script
import ref, computed, watchEffect, onMounted from 'vue';
export default
name: 'pages',
props:
total: Number,
pagerCount: Number,
pageSize: Number,
prependText: String,
suffixText: String,
disabled: Boolean,
hideOnSinglePage: Boolean,
background: Boolean || String,
modelValue: Number
,
setup (props, ctx)
const medianButtonList = ref([]);
const prependDisabled = ref(true);
const suffixDisabled = ref(true);
const doubleLeft = ref(false);
const doubleRight = ref(false);
const liList = ref([]);
const prepend = ref(null);
const suffix = ref(null);
const cPages = ref(null);
onMounted(() =>
watchEffect(() =>
liList.value.forEach(item =>
!props.background && (item.style.backgroundColor = 'transparent');
);
!props.background && (prepend.value.style.backgroundColor = 'transparent');
!props.background && (suffix.value.style.backgroundColor = 'transparent');
);
watchEffect(() =>
if (calculatePagesButtonList.value.length <= 1 && props.hideOnSinglePage)
cPages.value.style.display = 'none';
else
cPages.value.style.display = 'flex';
);
);
const handlePagesLiClick = (index) =>
if (props.disabled) return
if (typeof index === 'number' && props.modelValue !== index)
ctx.emit('update:modelValue', index);
ctx.emit('current-change', index);
;
const handleMouseEnter = (item) =>
if (props.disabled) return
if (item === 'prepend')
doubleLeft.value = true;
else if (item === 'suffix')
doubleRight.value = true;
;
const handleMouseLeave = (item) =>
if (props.disabled) return
if (item === 'prepend')
doubleLeft.value = false;
else if (item === 'suffix')
doubleRight.value = false;
;
const handleIClick = (item) =>
if (props.disabled) return
if (item === 'prepend')
const num = props.modelValue - 3;
ctx.emit('update:modelValue', num < 1? 1 : num);
else if (item === 'suffix')
const maxPages = Math.ceil(props.total / props.pageSize);
const num = props.modelValue + 3;
ctx.emit('update:modelValue', num > maxPages? maxPages : num);
ctx.emit('current-change', props.modelValue);
;
const handlePrependClick = () =>
if (props.disabled) return
if (props.modelValue <= 1) return;
ctx.emit('update:modelValue', props.modelValue - 1);
ctx.emit('prev-click', props.modelValue);
;
const handleSuffixClick = () =>
if (props.disabled) return
const value = calculatePagesButtonList.value;
const item = value[value.length - 1];
if (props.modelValue >= item) return;
ctx.emit('update:modelValue', props.modelValue + 1);
ctx.emit('next-click', props.modelValue);
;
const calculatePagesButtonList = computed(() =>
const value = props.modelValue;
const maxPages = Math.ceil(props.total / props.pageSize);
const bool = (maxPages - props.pagerCount) > 0;
const maxCurrentPage = (value - maxPages) > 0? maxPages : value;
const pagerCountHalf = Math.ceil((props.pagerCount - 2) / 2);
const a = (maxCurrentPage + pagerCountHalf) < maxPages;
const b = (maxCurrentPage - pagerCountHalf) <= 2;
let pagesButtonList = [];
if (bool)
if (b)
for(let i = 1; i < props.pagerCount; i++)
pagesButtonList.push(i);
pagesButtonList.push('suffix');
pagesButtonList.push(maxPages);
else if (a)
pagesButtonList.push(1);
pagesButtonList.push('prepend');
for(let i = (maxCurrentPage - pagerCountHalf + 1); i < (maxCurrentPage + pagerCountHalf); i++)
pagesButtonList.push(i);
pagesButtonList.push('suffix');
pagesButtonList.push(maxPages);
else if (!a)
pagesButtonList.push(1);
pagesButtonList.push('prepend');
for(let i = (maxPages - props.pagerCount + 2); i <= maxPages; i++)
pagesButtonList.push(i);
else
for (let i = 1; i <= maxPages; i++)
pagesButtonList.push(i);
return pagesButtonList;
);
const calculateCurrentPage = () =>
const value = calculatePagesButtonList.value;
const item = value[value.length - 1];
ctx.emit('update:modelValue', props.modelValue > item? item : props.modelValue);
;
watchEffect(() =>
calculateCurrentPage();
);
watchEffect(() =>
const value = calculatePagesButtonList.value;
const item = value[value.length - 1];
prependDisabled.value = props.modelValue === 1;
suffixDisabled.value = props.modelValue >= item;
);
return
calculatePagesButtonList,
medianButtonList,
prependDisabled,
suffixDisabled,
handlePagesLiClick,
handlePrependClick,
handleSuffixClick,
handleMouseEnter,
handleMouseLeave,
handleIClick,
doubleRight,
doubleLeft,
liList,
prepend,
cPages,
suffix
Pages.vue Style
<style lang='less' scoped>
.v-pages
display: flex;
align-items: center;
margin: 0 14px;
.prepend, .suffix
display: flex;
align-items: center;
justify-content: center;
min-width: 30px;
min-height: 28px;
box-sizing: border-box;
padding: 0 6px;
margin: 0 5px;
background-color:#F4F4F5;
cursor: pointer;
p, i
font-size: 12px;
color: #333;
font-weight: 600;
&:hover
p, i
color: #409EFF;
.prependDisabled, .suffixDisabled
p, i
color: #CDC9CC !important;
cursor: not-allowed;
.v-pages-ul
display: flex;
align-items: center;
.v-pages-li
margin: 0 5px;
background-color:#F4F4F5;
cursor: pointer;
span, i
display: block;
min-width: 30px;
box-sizing: border-box;
padding: 0 6px;
line-height: 28px;
text-align: center;
font-size: 12px;
color: #333;
font-weight: 600;
&:hover
span, i
color: #409EFF;
.activeLi
background-color:#409EFF;
span
color: #fff;
.color
color: #409EFF !important;
&:hover
span
color: #fff;
.disabled
p, i, span
color: #c0c4cc !important;
cursor: not-allowed !important;
</style>
index.js 出口文件中引入组件
// Pagination 分页
import Pagination from './components/Pagination/Pagination.vue';
import Pages from './components/Pagination/components/Pages.vue';
const Vair = function(Vue)
Vue.component(`v-$Pagination.name`, Pagination);
Vue.component(`v-$Pages.name`, Pages);
export default Vair;
使用组件
在main.js中引入
import createApp from 'vue';
import App from './App.vue';
import Vair from './libs/vair/index.js';
const app = createApp(App);
app.use(Vair).mount('#app');
App.vue中调用
<template>
<div>
<v-pagination
:page-sizes='pageSizes'
:pager-count='pagerCount'
:total='total'
:page-size='pageSize'
:current-page='currentPage'
:background='background'
:hideOnSinglePage='false'
:disabled='disabled'
@current-change='handleCurrentChange'
@prev-click='handlePrevClick'
@next-click='handleNextClick'
@size-change='handleSizeChange'
></v-pagination>
</div>
</template>
<script>
import ref from 'vue';
export default
setup ()
const pageSizes = ref([10, 20, 30, 40, 50, 100]);
const pageSize = ref(10);
const total = ref(50500);
const currentPage = ref(10);
const pagerCount = ref(7);
const background = ref(true);
const prependText = ref('prepre');
const suffixText = ref('nextnext');
const disabled = ref(false);
const handleCurrentChange = (index) =>
console.log(index)
;
const handlePrevClick = (index) =>
console.log('handlePrevClick 触发了', index);
;
const handleNextClick = (index) =>
console.log('handleNextClick 触发了', index);
;
const handleSizeChange = (number) =>
pageSize.value = number;
;
return
pageSizes,
pageSize,
total,
disabled,
currentPage,
pagerCount,
handleCurrentChange,
handlePrevClick,
handleNextClick,
handleSizeChange,
background,
prependText,
suffixText
</script>
<style lang='less' scoped>
div
margin-top: 20px;
</style>
效果展示
以上是关于：Pagination组件的主要内容，如果未能解决你的问题，请参考以下文章
AngularJs的UI组件ui-Bootstrap分享——Pager和Pagination
Element Pagination 分页修改页码当前页无效