概述
<b-pagination> 是一个自定义输入组件，提供当前页码输入控件。该值应通过应用中的 v-model 进行绑定。页码从 1 开始索引。页数根据提供的 total-rows 和 per-page 的 prop 值计算得出。
对于更改为新 URL 的分页，请改用 <b-pagination-nav> 组件。
与 <b-table> 搭配使用的示例
<template>
<div class="overflow-auto">
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
aria-controls="my-table"
></b-pagination>
<p class="mt-3">Current Page: {{ currentPage }}</p>
<b-table
id="my-table"
:items="items"
:per-page="perPage"
:current-page="currentPage"
small
></b-table>
</div>
</template>
<script>
export default {
data() {
return {
perPage: 3,
currentPage: 1,
items: [
{ id: 1, first_name: 'Fred', last_name: 'Flintstone' },
{ id: 2, first_name: 'Wilma', last_name: 'Flintstone' },
{ id: 3, first_name: 'Barney', last_name: 'Rubble' },
{ id: 4, first_name: 'Betty', last_name: 'Rubble' },
{ id: 5, first_name: 'Pebbles', last_name: 'Flintstone' },
{ id: 6, first_name: 'Bamm Bamm', last_name: 'Rubble' },
{ id: 7, first_name: 'The Great', last_name: 'Gazzoo' },
{ id: 8, first_name: 'Rockhead', last_name: 'Slate' },
{ id: 9, first_name: 'Pearl', last_name: 'Slaghoople' }
]
}
},
computed: {
rows() {
return this.items.length
}
}
}
</script>
自定义外观
<b-pagination> 支持多个 prop/slot，允许你自定义外观。所有 *-text prop 都是纯文本，并会去除 HTML，但你可以使用同名 slot 对应项。
要限制显示的页面按钮数量（包括省略号，但不包括第一个、上一个、下一个和最后一个按钮），请使用 limit prop 指定所需的页面按钮数量（包括省略号，如果显示）。默认 limit 为 5。支持的最小值为 3。当 limit 设置为 3 时，出于实际目的，将不会显示省略号指示符。
可以通过设置 hide-goto-end-buttons prop 来选择性地隐藏 first 和 last 按钮。
可以通过设置 hide-ellipsis prop 来选择性地禁用 ellipsis 的显示。
小屏幕支持
在较小的屏幕（即移动设备）上，一些 <b-pagination> 按钮将被隐藏，以最大程度地减少分页界面换行到多行的可能性
- 省略号指示符将在
xs 及更小的屏幕上隐藏。 - 页面编号按钮在
xs 屏幕及更小屏幕上最多只能显示 3 个。
这可确保最多只能显示 3 个页面编号按钮，以及转到第一页、上一页、下一页和最后一页的按钮。
按钮内容
有关所有可用插槽的完整列表，请参阅下面的 插槽 部分。
<template>
<div class="overflow-auto">
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
first-text="First"
prev-text="Prev"
next-text="Next"
last-text="Last"
></b-pagination>
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
first-text="⏮"
prev-text="⏪"
next-text="⏩"
last-text="⏭"
class="mt-4"
></b-pagination>
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
class="mt-4"
>
<template #first-text><span class="text-success">First</span></template>
<template #prev-text><span class="text-danger">Prev</span></template>
<template #next-text><span class="text-warning">Next</span></template>
<template #last-text><span class="text-info">Last</span></template>
<template #ellipsis-text>
<b-spinner small type="grow"></b-spinner>
<b-spinner small type="grow"></b-spinner>
<b-spinner small type="grow"></b-spinner>
</template>
<template #page="{ page, active }">
<b v-if="active">{{ page }}</b>
<i v-else>{{ page }}</i>
</template>
</b-pagination>
</div>
</template>
<script>
export default {
data() {
return {
rows: 100,
perPage: 10,
currentPage: 1
}
}
}
</script>
插槽 page 始终有作用域，而插槽 first-text、prev-text、next-text 和 last-text 则可以选择有作用域。插槽 ellipsis-text 没有作用域。
插槽 page 可用的作用域变量属性
| 属性 | 类型 | 说明 |
page | 数字 | 页码（从 1 到 numberOfPages） |
index | 数字 | 页码（从 0 索引到 numberOfPages -1） |
active | 布尔值 | 如果该页是活动页 |
disabled | 布尔值 | 如果页面按钮已禁用 |
content | 字符串 | 作为字符串的页码 |
插槽 first-text、prev-text、next-text 和 last-text 可用的作用域变量属性
| 属性 | 类型 | 说明 |
page | 数字 | 页码（从 1 到 numberOfPages） |
index | 数字 | 页码（从 0 索引到 numberOfPages -1） |
disabled | 布尔值 | 如果页面按钮已禁用 |
如果您希望使用第一页和最后一页的按钮转到相应页面，请使用 first-number 和 last-number 属性。
<template>
<div class="overflow-auto">
<div>
<h6>Goto first button number</h6>
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
first-number
></b-pagination>
</div>
<div class="mt-3">
<h6>Goto last button number</h6>
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
last-number
></b-pagination>
</div>
<div class="mt-3">
<h6>Goto first and last button number</h6>
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
first-number
last-number
></b-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
rows: 100,
perPage: 1,
currentPage: 5
}
}
}
</script>
通过将 size 属性设置为 'sm'（表示较小的按钮）或 'lg'（表示较大的按钮），可以从默认按钮大小进行更改（可选）。
<template>
<div class="overflow-auto">
<div>
<h6>Small</h6>
<b-pagination v-model="currentPage" :total-rows="rows" size="sm"></b-pagination>
</div>
<div class="mt-3">
<h6>Default</h6>
<b-pagination v-model="currentPage" :total-rows="rows"></b-pagination>
</div>
<div class="mt-3">
<h6>Large</h6>
<b-pagination v-model="currentPage" :total-rows="rows" size="lg"></b-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
rows: 100,
currentPage: 1
}
}
}
</script>
药丸样式
通过设置 pills 属性，可以轻松切换到药丸样式按钮
<template>
<div class="overflow-auto">
<div>
<h6>Small Pills</h6>
<b-pagination v-model="currentPage" pills :total-rows="rows" size="sm"></b-pagination>
</div>
<div class="mt-3">
<h6>Default Pills</h6>
<b-pagination v-model="currentPage" pills :total-rows="rows"></b-pagination>
</div>
<div class="mt-3">
<h6>Large Pills</h6>
<b-pagination v-model="currentPage" pills :total-rows="rows" size="lg"></b-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
rows: 100,
currentPage: 1
}
}
}
</script>
注意：药丸样式需要 BootstrapVue 的自定义 CSS/SCSS。
对齐
默认情况下，分页组件左对齐。通过将 prop align 设置为相应的值，可以将对齐方式更改为 center、right（right 是 end 的别名）或 fill。
<template>
<div class="overflow-auto">
<div>
<h6>Left alignment (default)</h6>
<b-pagination v-model="currentPage" :total-rows="rows"></b-pagination>
</div>
<div class="mt-3">
<h6 class="text-center">Center alignment</h6>
<b-pagination v-model="currentPage" :total-rows="rows" align="center"></b-pagination>
</div>
<div class="mt-3">
<h6 class="text-right">Right (end) alignment</h6>
<b-pagination v-model="currentPage" :total-rows="rows" align="right"></b-pagination>
</div>
<div class="mt-3">
<h6 class="text-center">Fill alignment</h6>
<b-pagination v-model="currentPage" :total-rows="rows" align="fill"></b-pagination>
</div>
</div>
</template>
<script>
export default {
data() {
return {
rows: 100,
currentPage: 3
}
}
}
</script>
防止选择某个页面
您可以监听 page-click 事件，该事件提供了一个选项来防止选择该页面。该事件使用两个参数发出
bvEvent：BvEvent 对象。调用 bvEvent.preventDefault() 以取消页面选择page：要选择的页码（从 1 开始）
出于可访问性原因，在使用 page-click 事件防止选择某个页面时，您应该提供一些方式通知用户为什么无法选择该页面。建议在 <b-pagination> 组件上使用 disabled 属性，而不是使用 page-click 事件（因为 disabled 对屏幕阅读器用户来说更直观）。
可访问性
<b-pagination> 组件提供了许多功能来支持辅助技术用户，例如 aria- 属性和键盘导航。
aria-controls
当分页控制页面上的另一个组件（例如 <b-table>）时，将 aria-controls prop 设置为它所控制的元素的 id。这将帮助视力障碍用户了解正在更新/控制哪个组件。
ARIA 标签
<b-pagination> 提供各种 *-label-* prop，用于设置组件内各种元素上的 aria-label 属性，这将帮助辅助技术用户。
| Prop | aria-label 内容默认值 |
label-first-page | "转到第一页" |
label-prev-page | “转到上一页” |
label-next-page | “转到下一页” |
label-last-page | “转到最后一页” |
label-page | “转到第”后跟页码 |
aria-label | “分页”，应用于外部分页容器 |
label-page 可选择接受一个函数来生成 aria-label。该函数传递一个参数，即页码（从 1 到页数）。
你可以通过将属性设置为一个空字符串 ('') 来移除任何标签，但除非按钮文本的内容传达了其目的，否则不建议这样做。
键盘导航支持
<b-pagination> 开箱即用支持键盘导航，并遵循 WAI-ARIA 巡回 tab 索引 模式。
- 切换到分页组件时，将自动聚焦当前活动页按钮
- 左（或 上）和 右（或 下）箭头键将分别聚焦页面列表中的上一个和下一个按钮
- Enter 或 空格 键将选择（单击）当前聚焦的页面按钮
- 按 Tab 将移动到页面上的下一个控件或链接，而按 Shift+Tab 将移动到页面上的上一个控件或链接。
另请参见
对于基于导航的分页，请参阅 <b-pagination-nav> 组件。