逐鹿网站建设,如何增加网站内链建设,景安网站,邢台网红隧道Vue3.xElement Plus仿制Acro Design简洁模式分页器组件 开发中难免会遇到宽度很窄的列表需要使用分页器的情况#xff0c;这时若使用Element Plus组件的分页器会导致分页器内容超出展示的区域#xff0c;而Element Plus组件中目前没有Acro Design那样小巧的分页器#xff08…Vue3.xElement Plus仿制Acro Design简洁模式分页器组件 开发中难免会遇到宽度很窄的列表需要使用分页器的情况这时若使用Element Plus组件的分页器会导致分页器内容超出展示的区域而Element Plus组件中目前没有Acro Design那样小巧的分页器Arco Design Vue如下图所示如果再引入一个新的UI组件库未免导致项目臃肿所以基于Vue3.x和Element Plus封装了一个即拿即用的”简洁模式“分页器组件以便不时之需 分页器组件代码部分
!-- 简洁模式分页器组件 --
templatediv classsmallpagination!-- 总数统计 --span{{ 共 total 条 }}/span!-- 翻页 --div classsmallpagination-pager!-- 左翻页 --el-icon clickpageTurning(down) :classcurPage 1 ? forbid-pageturning : ArrowLeft //el-icon!-- 页码 --el-input-number changehandlePageChange v-modelpageNum :min1 :maxpageTotal :step-strictlytrue:controlsfalse /b{{ / pageTotal }}/b!-- 右翻页 --el-icon clickpageTurning(up) :classcurPage pageTotal ? forbid-pageturning : ArrowRight //el-icon/div/div
/templatescript setup
import { useAttrs, computed, ref } from vue;
import {ArrowLeft,ArrowRight
} from element-plus/icons-vue;// 接收父组件参数
const attrs useAttrs();
// 父组件事件
const em defineEmits([handlePageChange]);
// 当前页
const pageNum ref(1);
// 父组件传递-当前页码
const curPage computed(() {pageNum.value attrs.curPage;return attrs.curPage;
});
// 父组件传递-总数
const total computed(() {return attrs.total;
});
// 总页码数
const pageTotal computed(() {return attrs.total 0 ? Math.ceil(attrs.total / attrs.pageSize) : 1;
});/* 改变页码 */
const handlePageChange (e) {if (pageTotal.value 1) {return;}em(handlePageChange, e);
};
/* 翻页 */
const pageTurning (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);}
};
/scriptstyle langless 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: 0 5px;font-size: 14px;font-weight: 400;color: #4E5969;}}
}
/style
style langless
.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使用简洁模式分页器组件代码如下
templatediv classxxx-list...div classlist-bottom-common-pageSmallPagination :totaltotal :curPagecurPage :pageSizepageSize handlePageChangehandleCurrentChange/SmallPagination/div/div
/templatescript setup
import SmallPagination from /components/xxx/SmallPagination.vue;
import { ref } from vue;// 当前页
const curPage ref(1);
// 每页条数
const pageSize ref(20);
// 列表总数
const total ref(0);/* 当前页改变 */
const handleCurrentChange (val) {curPage.value val;...
};
/script最终效果如下
