更新记录

1.0.0（2023-08-10）

1.0.0版本发布。

平台兼容性

组件背景

组件开发的首要原则就是解决实际问题。 客户要把目前正在运营的 vue-cli 项目移植到平板电脑上。原项目使用的组件库是Element-UI，用户要求尽可能的1：1复刻移植。本着用户就是上帝的原则，所有组件都按照原项目的UI实现。当遇到分页器组件时，在插件市场里没有找到可以替代的组件，所以就只能自己实现了。

文档

属性说明

page-num 属性说明

• page-num 的值表示可以看到并且可以点击的页码数量
• page-num 的值不能小于3，组件里有验证，小于3时控制台会显示错误提示，之所以有这个限制是因为当页码数量小于3时，会影响组件的使用

示例代码

<template>
  <lk-pagination
    :total="+total"
    :size="+size"
    :page-num="+pageNum"
    :align="align"
    :page-jump="jump"
    v-model="page"
    v-model:jump="pageJump"
    @confirm-jump="confirm"
  ></lk-pagination>
</template>

<script setup>
  import { ref } from 'vue'

  const total = ref(100)
  const size = ref(20)
  const page = ref(1)
  const pageNum = ref(3)
  const jump = ref('')
  const align = ref('right')
  const pageJump = ref(true)

  const confirm = value => page.value = value
</script>

样式适配说明

• 本组件使用的 css 单位是rpx，所以使用前要设置宽屏适配，方法就是在 pages.json 文件里的 globalStyle 里添加下面的代码：

  "rpxCalcMaxDeviceWidth": 960, // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
  "rpxCalcBaseDeviceWidth": 375, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375
  "rpxCalcIncludeWidth": 750 // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750

• 如果你觉得上面的方案不适用或者不想修改 pages.json 文件，也可以自定义组件样式，vue3 中使用 :deep() 可以实现样式穿透。

在线演示

在线演示地址

近期更新内容

• 扩展平台兼容性
• 国际化

其他

组件难免有不足之处，欢迎各位老铁们批评指正，有任何问题都可以在评论区中留言。