分页组件附带缓存

<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, watch } 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
  },
  pageKey: {
    type: String,
    default: ''
  }
})

const emits = defineEmits(['update:page', 'update:limit', 'pagination'])
// 生成唯一的分页缓存键，若未传递 pageKey，则使用当前页面路径
const paginationKey = computed(() => `pagination-${props.pageKey || window.location.pathname}`)
// const currentPage = computed({
//   set(v) {
//     emits('update:page', v)
//     sessionStorage.setItem(`${paginationKey.value}-currentPage`, v)  // 缓存当前页码
//   },
//   get() {

//       props.page = Number(sessionStorage.getItem(`${paginationKey.value}-currentPage`))

//     return props.page
//   }
// })
// 使用 watch 监听 page 更新 sessionStorage
watch(
  () => props.page,
  (newPage) => {
    // console.log(newPage, 8888888)
    sessionStorage.setItem(`${paginationKey.value}-currentPage`, newPage)
    emits('update:page', newPage)
  },
  { immediate: true }
) // immediate: true 确保在初始化时就执行
const currentPage = computed({
  set(v) {
    emits('update:page', v)
    sessionStorage.setItem(`${paginationKey.value}-currentPage`, v) // 缓存当前页码
  },
  get() {
    // 确保初始化时获取父组件的传值
    return props.page || Number(sessionStorage.getItem(`${paginationKey.value}-currentPage`)) || 1
  }
})
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;
  display: flex;
  align-items: center;
  justify-content: 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
        v-if="perationList.length > 0"
        :total="total"
        v-model:page="pageNum"
        v-model:limit="pageSize"
        @pagination="getNewDailyoPerationFn"
        :pageKey="'DayOperations'"
      />