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

最新推荐文章于 2024-12-01 23:54:11 发布

原创最新推荐文章于 2024-12-01 23:54:11 发布 · 395 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文详细介绍了如何在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';