Press UI

# Pagination 分页

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

# 引入

import PressPagination from 'press-ui/press-pagination/press-pagination.vue';

export default {
  components: {
    PressPagination,
  }
}

# 代码演示

# 基础用法

通过 current 来绑定当前页码。

<press-pagination 
  :current="currentPage" 
  :total-items="24" 
  :items-per-page="5" 
  @change="(value) => currentPage = value"
/>

import { ref } from 'vue';

export default {
  setup() {
    const currentPage = ref(1);
    return { currentPage };
  },
};

# 简单模式

将 mode 设置为 simple 来切换到简单模式，此时分页器不会展示具体的页码按钮。

<press-pagination 
  :current="currentPage" 
  :page-count="12" 
  mode="simple" 
  @change="(value) => currentPage = value"
/>

# 显示省略号

设置 force-ellipses 后会展示省略号按钮，点击后可以快速跳转。

<press-pagination
  :current="currentPage"
  :total-items="125"
  :show-page-size="3"
  force-ellipses
  @change="(value) => currentPage = value"
/>

# 自定义按钮

通过 prev-text、next-text 等插槽来自定义分页按钮的内容。

<press-pagination 
  :current="currentPage" 
  :total-items="50" 
  :show-page-size="5" 
  @change="(value) => currentPage = value"
>
  <template #prev-text>
    <press-icon-plus name="arrow-left" />
  </template>
  <template #next-text>
    <press-icon-plus name="arrow" />
  </template>
  <template #page="{ text }">{{ text }}</template>
</press-pagination>

# E-Sport 模式

<press-pagination
  :total="total"
  :current="current"
  @change="change"
/>

export default {
  data() {
    return {
      total: 10,
      current: 2,
    }
  },
  methods: {
    change() {

    }
  }
}

# API

# Props

通用参数

参数 说明 类型 默认值
mode 显示模式，可选值为 simple/multi/hor string -
current 当前页，从 1 开始 number -
total 页面总数 number -
custom-class 自定义类名 string -

mode 为 simple/multi 时参数

参数 说明 类型 默认值
prev-text 上一页按钮文字 string 上一页
next-text 下一页按钮文字 string 下一页
total-items 总记录数 number | string 0
items-per-page 每页记录数 number | string 10
show-page-size 显示的页码个数 number | string 5
force-ellipses 是否显示省略号 boolean false
show-prev-button 是否展示上一页按钮 boolean true
show-next-button 是否展示下一页按钮 boolean true

mode 为空或 hor 时参数

参数 说明 类型 默认值
tip-template 提示模板 string 第{{0}}页
safe-area-inset-bottom 是否留出底部安全距离 boolean true
auto-scroll 遇到边界自动滚动的页数 number 1

# Events

事件 说明 返回值
change 切换当前页 page

# 主题定制

# 样式变量

组件提供了下列 CSS 变量，可用于自定义样式。

名称 默认值 描述
--press-pagination-height 40px -
--press-pagination-font-size var(--press-font-size-md) -
--press-pagination-item-width 36px -
--press-pagination-item-default-color var(--press-primary-color) -
--press-pagination-item-disabled-color var(--press-gray-7) -
--press-pagination-item-disabled-background var(--press-background) -
--press-pagination-background var(--press-background-2) -
--press-pagination-desc-color var(--press-gray-7) -
--press-pagination-disabled-opacity var(--press-disabled-opacity) -

# 在线调试

横屏

← Sidebar →