分页

QPagination 组件可用于任何需要分页系统的地方。它为用户提供了一个简单的 UI，用于在项目或页面之间移动。

QPagition 有两种操作模式：按钮或使用输入框。后者允许用户通过点击/轻击输入框，键入页码，然后按 Enter 键进入特定页面。如果新页码在有效范围内，则 QPagination 绑定的 model 值将相应更改。

QPagination API

QPagination API
input
: Boolean
说明
使用输入框而不是按钮
icon-prev
: String
说明
遵循 Quasar 惯例的图标名称；确保您已安装图标库，除非使用 'img:' 前缀；如果值为 'none'（字符串），则不会渲染任何图标（但屏幕空间仍将用于它）。
icon-next
: String
说明
遵循 Quasar 惯例的图标名称；确保您已安装图标库，除非使用 'img:' 前缀；如果值为 'none'（字符串），则不会渲染任何图标（但屏幕空间仍将用于它）。
icon-first
: String
说明
遵循 Quasar 惯例的图标名称；确保您已安装图标库，除非使用 'img:' 前缀；如果值为 'none'（字符串），则不会渲染任何图标（但屏幕空间仍将用于它）。
icon-last
: String
说明
遵循 Quasar 框架约定的图标名称；确保您已安装图标库，除非使用 'img:' 前缀；如果值为 'none'（字符串），则不会渲染任何图标（但屏幕空间仍将被占用）
to-fn
: (page) => Object | String
说明
生成页面按钮的链接；为了获得最佳性能，请从您的作用域中引用它，不要内联定义。
boundary-links
: Boolean | null
说明
显示边界按钮链接
boundary-numbers
: Boolean | null
说明
始终显示第一个和最后一个页面按钮（如果不使用 'input'）
direction-links
: Boolean | null
说明
显示方向按钮
ellipses
: Boolean | null
说明
当页面可用时显示省略号 (...)
max-pages
: Number | String
说明
每次显示的最大页面链接数；0 表示无限制

用法

标准

<template>
  <div class="q-pa-lg flex flex-center">
    <q-pagination
      v-model="current"
      :max="5"
    />
  </div>
</template>

自定义图标

<template>
  <div class="q-pa-lg flex flex-center">
    <q-pagination
      v-model="current"
      :max="5"
      direction-links
      boundary-links
      icon-first="skip_previous"
      icon-last="skip_next"
      icon-prev="fast_rewind"
      icon-next="fast_forward"
    />
  </div>
</template>

使用输入框

<template>
  <div class="q-pa-lg flex flex-center">
    <q-pagination
      v-model="current"
      :max="5"
      input
    />
  </div>
</template>
<template>
  <div class="q-pa-lg flex flex-center">
    <q-pagination
      v-model="current"
      :max="5"
      input
      input-class="text-orange-10"
    />
  </div>
</template>

控制显示多少页码

<template>
  <div class="q-pa-lg flex flex-center">
    <q-pagination
      v-model="current"
      color="black"
      :max="10"
      :max-pages="6"
      :boundary-numbers="false"
    />
  </div>
</template>
<template>
  <div class="q-pa-lg flex flex-center">
    <q-pagination
      v-model="current"
      color="teal"
      :max="10"
      :max-pages="5"
      :ellipses="false"
      :boundary-numbers="false"
    />
  </div>
</template>

处理边界

<template>
  <div class="q-pa-lg flex flex-center">
    <q-pagination
      v-model="current"
      color="purple"
      :max="10"
      :max-pages="6"
      boundary-numbers
    />
  </div>
</template>
<template>
  <div class="q-pa-lg flex flex-center">
    <q-pagination
      v-model="current"
      color="deep-orange"
      :max="5"
      boundary-links
    />
  </div>
</template>
<template>
  <div class="q-pa-lg flex flex-center">
    <q-pagination
      v-model="current"
      :max="5"
      direction-links
    />
  </div>
</template>

样式

下面只是一些示例，并不是完整的列表：

<template>
  <div class="q-pa-lg">
    <div class="q-gutter-md">
      <q-pagination
        v-model="current"
        :max="5"
        direction-links
        flat
        color="grey-4"
        active-color="primary"
      />

      <q-pagination
        v-model="current"
        :max="5"
        direction-links
        outline
        color="orange"
        active-color="primary"
      />

      <q-pagination
        v-model="current"
        :max="5"
        direction-links
        push
        color="teal"
      />

      <q-pagination
        v-model="current"
        :max="5"
        direction-links
        unelevated
        color="black"
        active-color="yellow"
        active-text-color="black"
      />
    </div>
  </div>
</template>
查看更多？
Observers 侦听器
Scroll Observer 滚动侦听器
Vue 组件
Parallax 视差
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。