Vue3.x+Element Plus仿制Acro Design簡(jiǎn)潔模式實(shí)現(xiàn)分頁(yè)器組件
開(kāi)發(fā)中難免會(huì)遇到寬度很窄的列表需要使用分頁(yè)器的情況,這時(shí)若使用Element Plus組件的分頁(yè)器會(huì)導(dǎo)致分頁(yè)器內(nèi)容超出展示的區(qū)域,而Element Plus組件中目前沒(méi)有Acro Design那樣小巧的分頁(yè)器(Arco Design Vue)如下圖所示,如果再引入一個(gè)新的UI組件庫(kù)未免導(dǎo)致項(xiàng)目臃腫,所以基于Vue3.x和Element Plus封裝了一個(gè)即拿即用的”簡(jiǎn)潔模式“分頁(yè)器組件以便不時(shí)之需
分頁(yè)器組件代碼部分:
<!-- (簡(jiǎn)潔模式)分頁(yè)器組件 --> <template> <div class="smallpagination"> <!-- 總數(shù)統(tǒng)計(jì) --> <span>{{ '共' + total + '條' }}</span> <!-- 翻頁(yè) --> <div class="smallpagination-pager"> <!-- 左翻頁(yè) --> <el-icon @click="pageTurning('down')" :class="curPage <= 1 ? 'forbid-pageturning' : ''"> <ArrowLeft /> </el-icon> <!-- 頁(yè)碼 --> <el-input-number @change="handlePageChange" v-model="pageNum" :min="1" :max="pageTotal" :step-strictly="true" :controls="false" /> <b>{{ '/ ' + pageTotal }}</b> <!-- 右翻頁(yè) --> <el-icon @click="pageTurning('up')" :class="curPage >= pageTotal ? 'forbid-pageturning' : ''"> <ArrowRight /> </el-icon> </div> </div> </template> <script setup> import { useAttrs, computed, ref } from 'vue'; import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'; // 接收父組件參數(shù) const attrs = useAttrs(); // 父組件事件 const em = defineEmits(['handlePageChange']); // 當(dāng)前頁(yè) const pageNum = ref(1); // 父組件傳遞-當(dāng)前頁(yè)碼 const curPage = computed(() => { pageNum.value = attrs.curPage; return attrs.curPage; }); // 父組件傳遞-總數(shù) const total = computed(() => { return attrs.total; }); // 總頁(yè)碼數(shù) const pageTotal = computed(() => { return attrs.total > 0 ? Math.ceil(attrs.total / attrs.pageSize) : 1; }); /* 改變頁(yè)碼 */ const handlePageChange = (e) => { if (pageTotal.value <= 1) { return; } em('handlePageChange', e); }; /* 翻頁(yè) */ const pageTurning = (type) => { // 向前翻頁(yè) if (type === 'up') { if (curPage.value >= pageTotal.value || pageTotal.value <= 1) { return; } em('handlePageChange', pageNum.value + 1); } // 向后翻頁(yè) else { if (pageTotal.value <= 1 || curPage.value <= 1) { return; } em('handlePageChange', pageNum.value - 1); } }; </script> <style lang="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: 0 5px; font-size: 14px; font-weight: 400; color: #4E5969; } } } </style> <style lang="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>
使用簡(jiǎn)潔模式分頁(yè)器組件代碼如下:
<template> <div class="xxx-list"> ... <div class="list-bottom-common-page"> <SmallPagination :total="total" :curPage="curPage" :pageSize="pageSize" @handlePageChange="handleCurrentChange"> </SmallPagination> </div> </div> </template> <script setup> import SmallPagination from '@/components/xxx/SmallPagination.vue'; import { ref } from 'vue'; // 當(dāng)前頁(yè) const curPage = ref(1); // 每頁(yè)條數(shù) const pageSize = ref(20); // 列表總數(shù) const total = ref(0); /* 當(dāng)前頁(yè)改變 */ const handleCurrentChange = (val) => { curPage.value = val; ... }; </script>
最終效果如下:
到此這篇關(guān)于Vue3.x+Element Plus仿制Acro Design簡(jiǎn)潔模式實(shí)現(xiàn)分頁(yè)器組件的文章就介紹到這了,更多相關(guān)Vue Element分頁(yè)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
可能是全網(wǎng)vue?v-model最詳細(xì)講解教程
Vue官網(wǎng)教程上關(guān)于v-model的講解不是十分的詳細(xì),寫(xiě)這篇文章的目的就是詳細(xì)的剖析一下,下面這篇文章主要給大家介紹了關(guān)于vue?v-model最詳細(xì)講解的相關(guān)資料,需要的朋友可以參考下2022-11-11vue路由跳轉(zhuǎn)router-link清除歷史記錄的三種方式(總結(jié))
這篇文章主要介紹了vue路由跳轉(zhuǎn)router-link清除歷史記錄的三種方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04詳解Vue2+Echarts實(shí)現(xiàn)多種圖表數(shù)據(jù)可視化Dashboard(附源碼)
本篇文章主要介紹了詳解Vue2+Echarts實(shí)現(xiàn)多種圖表數(shù)據(jù)可視化Dashboard(附源碼),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-03-03element中drawer模板的實(shí)現(xiàn)
本文主要介紹了element中drawer模板的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07淺談vue引用靜態(tài)資源需要注意的事項(xiàng)
今天小編就為大家分享一篇淺談vue引用靜態(tài)資源需要注意的事項(xiàng),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09vue在IIS服務(wù)器部署后路由無(wú)法跳轉(zhuǎn)
在IIS服務(wù)器上部署Vue項(xiàng)目時(shí),可能會(huì)遇到路由無(wú)法正常跳轉(zhuǎn)的問(wèn)題,解決方法有兩種,下面就來(lái)具體介紹一下解決方法,感興趣的可以了解一下2024-10-10vue?webpack打包原理解析(全網(wǎng)最新最全)
webpack是讓我們可以進(jìn)行模塊化開(kāi)發(fā),并且會(huì)幫助我們處理模塊間的依賴關(guān)系,這篇文章主要介紹了vue?webpack打包原理,本篇介紹的有點(diǎn)長(zhǎng),希望大家耐心閱讀2023-02-02詳解vite+ts快速搭建vue3項(xiàng)目以及介紹相關(guān)特性
這篇文章主要介紹了vite+ts快速搭建vue3項(xiàng)目以及介紹相關(guān)特性,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02VeeValidate 的使用場(chǎng)景以及配置詳解
這篇文章主要介紹了VeeValidate 的使用場(chǎng)景以及配置詳解,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01