Vue3.x+Element Plus仿制Acro Design简洁模式实现分页

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

分页器组件代码部分：

<!-- （简洁模式）分页器组件 -->
<template>
  <div class="small pagination ">
    <!-- 总数统计 -->
    <span>{{ '共' +  total  + '条' }}</span>
    <!-- 翻页 -->
    <div class="smallpa gin ation-pager">
      <!-- 左翻页 -->
      <el -i con @click="pageTurning('down')" :class="curPage <= 1 ? 'forbid-pageturning' : ''">
        <ArrowLeft />
      </el-icon>
      <!-- 页码 -->
      <el-input-number @change="handlePageChange" v-model="pageNum" :min="1" :max="pageTotal" :step -s trictly="true"
        :controls="false" />
      <b>{{ '/ ' + pageTotal }}</b>
      <!-- 右翻页 -->
      <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
} f rom  '@element-plus/icons-vue';

// 接收父组件参数
const attrs = useAttrs();
// 父组件事件
const em =  define Em IT s(['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.c ei l(attrs.total / attrs.pageSize) : 1;
});

/*  改变 页码 */
const handlePageChange = (e) => {
  if (pageTotal.value <= 1) {
    return;
  }
  em('handlePageChange', e);
};
/* 翻页 */
const pageTurning = (ty PE ) => {
  // 向前翻页
  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>

<style lang="less" scoped>
.smallpagination {
  width: auto;
  height: 100%;
  dis play : flex;
  align-items:  center ;

  >span {
    m arg in-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;

      & am  p; :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: # f2 f3f5;
        box-shadow: none !important;
      }
    }
  }
}
</style>

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

<template>
    <div class="xxx-list">
    	 .. .
        <div class="list-bottom-common-page">
          <SmallPagination :total="total" :curPage="curPage" :pageSize="pageSize" @handlePageChange="handle current Change">
          </SmallPagination>
        </div>
    </div>
</template>

<script setup>
import SmallPagination from '@/ component s/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>

最终效果如下：

到此这篇关于Vue3.x+Element Plus仿制Acro Design简洁模式实现分页器组件的 文章 就介绍到这了,更多相关Vue Element分页器内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章: vue+elementUI实现分页效果 vue+Element-ui实现分页效果 vue+elementUI组件table实现前端分页功能 vue 基于element-ui 分页组件封装的实例代码 vue仿element实现分页器效果

总结

以上是 为你收集整理的 Vue3.x+Element Plus仿制Acro Design简洁模式实现分页器组件 全部内容，希望文章能够帮你解决 Vue3.x+Element Plus仿制Acro Design简洁模式实现分页器组件 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于Vue3.x+Element Plus仿制Acro Design简洁模式实现分页的详细内容...