vue3封装分页组件以及回滚函数

本文详细介绍了如何在Vue项目中使用el-pagination组件进行分页,包括如何处理大小改变、页码切换时的滚动效果以及滚动函数的实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

分页组件

<template>
  <div class="pagination-container">
      <el-pagination
          background
          :hide-on-single-page="false"
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="pageSizes"
          :layout="layout"
          :total="total"
          :small="small"
          :prev-text="prevText"
          :next-text="nextText"
          v-bind="$attrs"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
  </div>
</template>

<script setup>
 import { computed } from 'vue';
 import { scrollTo } from '@/utils/scrollTo';
 
 const props = defineProps({
      total: {
          type: Number,
          default: 0
      },
      page: {
          type: Number,
          default: 1
      },
      limit: {
          type: Number,
          default: 10
      },
      small: {
          type: Boolean,
          default: false
      },
      pageSizes: {
          type: Array,
          default() {
              return [10, 20, 30, 50, 100]
          }
      },
      prevText: {
          type: String,
          default: '上一页'
      },
      nextText: {
          type: String,
          default: '下一页'
      },
      layout: {
          type: String,
          default: 'prev, pager, next, jumper'  
      },
      autoScroll: {
          type: Boolean,
          default: true
      },
 })
 
  const emits = defineEmits(['update:page', 'update:limit', 'pagination']);
  const currentPage = computed({
    set(v) {
        console.log(v)
          emits('update:page', v)
      },
      get() {
          return props.page
      },
  })
  const pageSize = computed({
      set(v) {
          emits('update:limit', v)
      },
      get() {
          return props.limit
      },
  });
 const handleSizeChange = (val) =>{
    emits('pagination',{ page: currentPage.value, limit: val })
      if (props.autoScroll) {
          scrollTo(0, 800)
      }
  };
  const handleCurrentChange = (val)=> {
      emits('pagination',{ page: val, limit: pageSize.value })
      if (props.autoScroll) {
          scrollTo(0, 800)
      }
  };
</script>

<style lang="scss" scoped>
  .pagination-container {
      padding: 10px 10px;
      text-align: center;
      overflow-x: auto;
      border-radius: 4px;
      :deep(.el-pager li) {
          border-radius: 4px;
          background: #fff;
      }
      :deep(.el-pagination button) {
          border-radius: 4px;
          background: #fff;
      }
  }
</style>

回滚函数

Math.easeInOutQuad = function(t, b, c, d) {
  t /= d / 2
  if (t < 1) {
    return c / 2 * t * t + b
  }
  t--
  return -c / 2 * (t * (t - 2) - 1) + b
}

// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
var requestAnimFrame = (function() {
  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
})()

// because it's so fucking difficult to detect the scrolling element, just move them all
function move(amount) {
  document.documentElement.scrollTop = amount
  document.body.parentNode.scrollTop = amount
  document.body.scrollTop = amount
}

function position() {
  return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
}

export function scrollTo(to, duration, callback) {
  const start = position()
  const change = to - start
  const increment = 20
  let currentTime = 0
  duration = (typeof (duration) === 'undefined') ? 500 : duration
  var animateScroll = function() {
    // increment the time
    currentTime += increment
    // find the value with the quadratic in-out easing function
    var val = Math.easeInOutQuad(currentTime, start, change, duration)
    // move the document.body
    move(val)
    // do the animation unless its over
    if (currentTime < duration) {
      requestAnimFrame(animateScroll)
    } else {
      if (callback && typeof (callback) === 'function') {
        // the animation is done so lets callback
        callback()
      }
    }
  }
  animateScroll()
}

使用方法

<PagingDevice :total="total" 、、总条数
                v-model:page="pageNum" 、、页码
                v-model:limit="pageSize" 、、条数
                @pagination="getStrengtheningRecordsFn" /> 、、接口方法
import PagingDevice from '@/components/PagingDevice/index.vue';

### 封装 Vue 3 和 TypeScript 的分页组件 为了创建一个功能齐全且易于使用的分页组件,在 Vue 3 中使用 TypeScript 可以为开发人员提供更好的类型安全性和代码提示支持。下面是一个详细的实现方案。 #### 组件结构设计 定义 `Pagination` 组件来处理页面切换逻辑以及样式展示等功能。此组件接收一些属性作为配置项,比如总条目数、每页显示数量等,并通过这些参数计算出总的页码数目[^1]。 #### 属性说明 | 参数名 | 类型 | 默认值 | 描述 | | --- | --- | --- | --- | | totalItems | number | - | 数据总量 | | pageSize | number | 10 | 每一页显示多少条记录 | | currentPage | number | 1 | 当前选中的页码 | #### 实现代码示例 以下是基于上述描述编写的简单版分页器: ```typescript <template> <nav aria-label="Page navigation"> <ul class="pagination justify-content-center"> <!-- 上一页按钮 --> <li :class="{ disabled: currentPage === 1 }" @click="prevPage()"> <a href="#" tabindex="-1">上一页</a> </li> <!-- 数字页码列表 --> <li v-for="(page, index) in pagesList" :key="index" :class="{ active: page === currentPage }" @click="changePage(page)"> <a>{{ page }}</a> </li> <!-- 下一页按钮 --> <li :class="{ disabled: currentPage >= totalPages }" @click="nextPage()"> <a>下一页</a> </li> </ul> </nav> </template> <script setup lang="ts"> import { computed, defineProps, ref } from &#39;vue&#39;; interface Props { totalItems?: number; pageSize?: number; } const props = withDefaults(defineProps<Props>(), { totalItems: 0, pageSize: 10, }); // 计算总共有几页 const totalPages = computed(() => Math.ceil(props.totalItems / props.pageSize)); // 定义当前页状态变量,默认第一页 let currentPage = ref<number>(1); // 动态生成要渲染的页码数组 const pagesList = computed(() => Array.from({ length: totalPages.value }, (_, i) => i + 1) ); function changePage(newPage: number): void { if (newPage !== currentPage.value && newPage > 0 && newPage <= totalPages.value) { currentPage.value = newPage; emit(&#39;update:currentPage&#39;, newPage); } } function prevPage(): void { const nextPage = currentPage.value - 1; changePage(nextPage); } function nextPage(): void { const nextPage = currentPage.value + 1; changePage(nextPage); } </script> ``` 该模板部分展示了带有上下翻页链接和中间具体页码链接的一组导航控件;脚本则负责监听用户的交互操作并更新相应的视图数据[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值