Vue3.x+Element Plus如何实现分页器组件(element,plus,vue3,开发技术)

开发中难免会遇到宽度很窄的列表需要使用分页器的情况，这时若使用Element Plus组件的分页器会导致分页器内容超出展示的区域，而Element Plus组件中目前没有Acro Design那样小巧的分页器（Arco Design Vue）如下图所示，如果再引入一个新的UI组件库未免导致项目臃肿，所以基于Vue3.x和Element Plus封装了一个即拿即用的”简洁模式“分页器组件以便不时之需

分页器组件代码部分：

<!--（简洁模式）分页器组件--><template><divclass="smallpagination"><!--总数统计--><span>{{'共'+total+'条'}}</span><!--翻页--><divclass="smallpagination-pager"><!--左翻页--><el-icon@click="pageTurning('down')":class="curPage<=1?'forbid-pageturning':''"><ArrowLeft/></el-icon><!--页码--><el-input-number@change="handlePageChange"v-model="pageNum":min="1":max="pageTotal":step-strictly="true":controls="false"/><b>{{'/'+pageTotal}}</b><!--右翻页--><el-icon@click="pageTurning('up')":class="curPage>=pageTotal?'forbid-pageturning':''"><ArrowRight/></el-icon></div></div></template><scriptsetup>import{useAttrs,computed,ref}from'vue';import{ArrowLeft,ArrowRight}from'@element-plus/icons-vue';//接收父组件参数constattrs=useAttrs();//父组件事件constem=defineEmits(['handlePageChange']);//当前页constpageNum=ref(1);//父组件传递-当前页码constcurPage=computed(()=>{pageNum.value=attrs.curPage;returnattrs.curPage;});//父组件传递-总数consttotal=computed(()=>{returnattrs.total;});//总页码数constpageTotal=computed(()=>{returnattrs.total>0?Math.ceil(attrs.total/attrs.pageSize):1;});/*改变页码*/consthandlePageChange=(e)=>{if(pageTotal.value<=1){return;}em('handlePageChange',e);};/*翻页*/constpageTurning=(type)=>{//向前翻页if(type==='up'){if(curPage.value>=pageTotal.value||pageTotal.value<=1){return;}em('handlePageChange',pageNum.value+1);}//向后翻页else{if(pageTotal.value<=1||curPage.value<=1){return;}em('handlePageChange',pageNum.value-1);}};</script><stylelang="less"scoped>.smallpagination{width:auto;height:100%;display:flex;align-items:center;>span{margin-right:11px;font-size:14px;font-weight:400;color:#4E5969;line-height:21px;}.smallpagination-pager{display:flex;align-items:center;.el-icon{width:30px;height:30px;font-size:14px;color:#4E5969;cursor:pointer;&:hover{background:rgb(247,248,250);color:#0082ff;}}.forbid-pageturning{opacity:0.4;cursor:not-allowed;&:active{color:#4E5969;background:rgb(255,255,255);}}>b{margin:05px;font-size:14px;font-weight:400;color:#4E5969;}}}</style><stylelang="less">.smallpagination{.smallpagination-pager{.el-input-number{width:40px;margin-left:5px;span{display:none;}.el-input__wrapper{padding:0;height:30px;font-size:14px;box-sizing:border-box;background:#f2f3f5;box-shadow:none!important;}}}}</style>

使用简洁模式分页器组件代码如下：

<template><divclass="xxx-list"> ...<divclass="list-bottom-common-page"><SmallPagination:total="total":curPage="curPage":pageSize="pageSize"@handlePageChange="handleCurrentChange"></SmallPagination></div></div></template><scriptsetup>importSmallPaginationfrom'@/components/xxx/SmallPagination.vue';import{ref}from'vue';//当前页constcurPage=ref(1);//每页条数constpageSize=ref(20);//列表总数consttotal=ref(0);/*当前页改变*/consthandleCurrentChange=(val)=>{curPage.value=val;...};</script>

最终效果如下：