Rainui

Appearance

r-pagination ​

r-pagination分页组件,数据量过多时，采用分页的形式将数据分隔，每次只加载一个页面。

示例 ​

vue
<template>
  <r-config-provider>
    <view style="padding: 20rpx">
      <view style="padding: 20rpx 0">基础用法</view>
      <r-pagination
        v-model:value="currentPage"
        :total-items="24"
        :items-per-page="5"
      />
      <view style="padding: 20rpx 0">简单模式 </view>
      <r-pagination
        v-model:value="currentPage"
        :page-count="12"
        mode="simple"
      />
      <view style="padding: 20rpx 0">显示省略号 </view>
      <r-pagination
        v-model:value="currentPage"
        :total-items="125"
        :show-page-size="3"
        force-ellipses
      />
      <view style="padding: 20rpx 0">自定义按钮 </view>
      <r-pagination
        v-model:value="currentPage"
        :total-items="50"
        :show-page-size="5"
      >
        <template #prevText>
          <r-icon name="arrow-left" color="inherit" />
        </template>
        <template #nextText>
          <r-icon name="arrow" color="inherit" />
        </template>
        <template #page="{ item }">{{ item.text }}</template>
      </r-pagination>
    </view>
  </r-config-provider>
</template>
<script setup>
import { ref } from "vue";
const currentPage = ref(1);
</script>

API ​

Props ​

名称说明类型默认值可选值
value当前页码Number1-
mode显示模式Stringmultisimple
prevText上一页按钮文字String上一页-
nextText下一页按钮文字String下一页-
pageCount总页数Number--
totalItems总记录数Number0-
itemsPerPage每页记录数Number10
showPageSize显示的页码个数Number5
forceEllipses是否显示省略号Booleanfalsetrue
showPrevButton是否展示上一页按钮Booleantruefalse
showNextButton是否展示下一页按钮Booleantruefalse
themeNamer-theme主题名称Stringdefault

Slots ​

名称说明参数
page自定义页码
prevText自定义上一页按钮文字-
nextText自定义下一页按钮文字-
pageDesc简单模式内容插槽-

Events ​

名称说明回调参数
change页码改变时触发value
update:value页码改变时触发value

更多组件，请前往rainui