首页
中文手册
组件
分页
分页(Pagination)
用于另一个组件(如<b-table>
或lists)的分页控件的“快速开始”、“上一个”、“下一个”、“最后一个”和“页面”按钮。
Show page table of contents
对于更改为新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>
是提供当前页码输入控件的自定义输入组件。
该值应通过应用程序中的v-model
绑定。页码从1开始索引。页数是根据为
总行
和
每页
提供的属性值计算的。
自定义外观
<b-pagination>
支持多个属性/插槽,允许您自定义外观。
所有的*-text
道具都是纯文本的,去掉了HTML,但是您可以使用它们相同名称的插槽对应项。
要限制显示的页面按钮数(包括省略号,但不包括第一个、上一个、下一个和最后一个按钮),请使用limit
属性指定所需的页面按钮数(包括省略号,如果显示)。
默认限制为5
。支持的最小值为3
。
当limit
设置为3
时,出于实际目的,不会显示省略号指示器。
通过设置hide-goto-end-buttons
属性,可以选择隐藏第一个
和
最后一个
按钮。
通过设置隐藏省略号
属性,可以选择性地禁用省略号
的显示。
小屏幕支持
在较小的屏幕(即移动屏幕)上,一些<b-pagination>
按钮将被隐藏,以最小化分页接口包装到多行的可能性:
省略号指示器将隐藏在屏幕xs
和更小的屏幕上。
页码按钮将限制为在xs
屏幕上最多可见3个或更小。
这样可以确保不超过3个页码按钮以及goto first、prev、next和last按钮可见。
按钮内容
有关所有可用插槽的完整列表,请参阅下面的Slots 部分。
<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 v-slot:first-text > <span class ="text-success" > First</span > </template >
<template v-slot:prev-text > <span class ="text-danger" > Prev</span > </template >
<template v-slot:next-text > <span class ="text-warning" > Next</span > </template >
<template v-slot:last-text > <span class ="text-info" > Last</span > </template >
<template v-slot: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 v-slot: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 >
slo 页面
始终具有作用域,
而slots first-text
,
prev-text
,
next-text
和
last-text
可以选择作用域。
省略号文本
槽没有作用域。
页面
槽可用的作用域变量属性:
属性
类型
描述
page
Number
页码(从0
到页数
)
index
Number
页码(从0
索引到页码-1
)
active
Boolean
如果该页是活动页
disabled
Boolean
如果页面按钮被禁用
content
String
作为字符串的页码
first-text
,
prev-text
,
next-text
和
last-text
槽可用的作用域变量属性:
属性
类型
描述
page
Number
页码(从1
到页数
)
index
Number
页码(从0
索引到页码-1
)
disabled
Boolean
如果页面按钮被禁用
如果希望有带有第一个和最后一个页码的按钮转到相应的页面,请使用第一个页码
和
最后一个页码
属性。
<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'
表示较大的按钮,可以选择从默认按钮大小更改为'sm'
。
<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 >
Pill 样式
通过设置pills
属性轻松切换到pill样式按钮
<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 >
注意: Pill样式需要BootstrapVue的自定义CSS/SCSS。
对齐
默认情况下,分页组件是左对齐的。将“对齐方式”更改为center
,
right
(right
是end
的别名)
或通过将“支柱对齐”设置为适当的值来填充。
<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 >
可访问性
<b-pagination>
组件提供许多特性来支持辅助技术用户,例如aria
属性和键盘导航。
aria 控制项
当分页控制页面上的另一个组件(如<b-table>
)时,
将aria-controls
属性设置为它所控制的元素的id
。这将帮助无视力用户了解正在更新/控制的组件。
ARIA 标签
<b-pagination>
提供了各种*-label-*
属性,
用于设置组件中各个元素的aria-label
,这将帮助辅助技术的用户。
属性
aria-label
内容默认值
label-first-page
"Goto first page"
label-prev-page
"Goto previous page"
label-next-page
"Goto next page"
label-last-page
"Goto last page"
label-page
"Goto page", 附页码
aria-label
"Pagination",应用于外部分页容器
label页面
可以选择接受一个函数来生成aria标签。函数被传递一个参数,即页码(从1到页数的索引)。
您可以通过将prop设置为空字符串(''
)来移除任何标签,但不建议这样做,除非按钮的内容以文本形式传达其用途。
键盘导航支持
<b-pagination>
支持现成的键盘导航,
并遵循WAI-ARIA roving tabindex 模式。
切换到分页组件将自动聚焦当前活动页按钮
LEFT
(或 UP ) and RIGHT
(或 DOWN )箭头键将分别聚焦页面列表中的上一个和下一个按钮
ENTER 或SPACE 键将选择(单击)当前聚焦的页面按钮
按TAB 键将移动到页面上的下一个控件或链接,而按SHIFT +TAB 键将移动到页面上的上一个控件或链接。
另请参阅
有关基于导航的分页,请参见
<b-pagination-nav>
组件。
组件引用
属性 (Click to sort Ascending)
类型
默认值
描述
disabled
Boolean
false
当设置为“true”时,将禁用组件的功能并将其置于禁用状态
value
v-model
Number or String
当前页码,从1开始
limit
Number or String
5
要显示的最大按钮数(如果显示,则包括省略号,但不包括bookend按钮)
align
String
'left'
页面按钮的对齐方式:“开始”(或“左”)、“中心”、“结束”(或“右”)或“填充”
pills
v2.1.0+
Boolean
false
对分页按钮应用pill样式
hide-goto-end-buttons
Boolean
false
隐藏“转到第一页”和“转到最后一页”按钮
aria-label
String
'Pagination'
要放入分页控件的“aria label”属性中的值
label-first-page
String
'Go to first page'
要放入“转到第一页”按钮的“aria label”属性中的值
first-text
String
'«'
“转到第一页”按钮中要放置的内容
first-number
v2.3.0+
Boolean
false
显示第一个页码而不是转到第一个按钮
first-class
v2.3.0+
String or Array or Object
类应用于“转到第一页”按钮
label-prev-page
String
'Go to previous page'
要放入“转到上一页”按钮的“aria label”属性中的值
prev-text
String
'‹'
“转到上一页”按钮中要放置的内容
prev-class
v2.3.0+
String or Array or Object
类应用于“转到上一页”按钮
label-next-page
String
'Go to next page'
要放入“转到下一页”按钮的“aria label”属性中的值
next-text
String
'›'
“转到下一页”按钮中要放置的内容
next-class
v2.3.0+
String or Array or Object
类应用于“转到下一页”按钮
label-last-page
String
'Go to last page'
要放入“转到最后一页”按钮的“aria label”属性中的值
last-text
String
'»'
“转到最后一页”按钮中要放置的内容
last-number
v2.3.0+
Boolean
false
显示最后一个页码而不是转到最后一个按钮
last-class
v2.3.0+
String or Array or Object
类应用于“转到最后一页”按钮
label-page
String or Function
'Go to page'
要放入“转到页面”按钮的“aria label”属性中的值。页码将自动添加
page-class
v2.3.0+
String or Array or Object
要应用于“转到页面”按钮的类
hide-ellipsis
Boolean
false
不显示省略号按钮
ellipsis-text
String
'…'
要放置在省略号占位符中的内容
ellipsis-class
v2.3.0+
String or Array or Object
要应用于“省略号”占位符的类
size
String
呈现按钮的大小:“sm”、“md”(默认)或“lg”
per-page
Number or String
20
每页行数
total-rows
Number or String
0
数据集中的总行数
aria-controls
String
此控件所控制的元素或组件的ID。值放在“aria controls”属性中
Slot 名称
描述
范围
first-text
“转到首页”按钮的内容。 可选范围
Scope
prev-text
“转到上一页”按钮的内容。 可选范围
Scope
next-text
“转到下一页”按钮的内容。 可选范围
Scope
last-text
“转到最后一页”按钮的内容。 可选范围
Scope
ellipsis-text
“ ...”指示符内容。 没有范围
page
页码按钮的内容。 始终范围
Scope
数据
参数
描述
input
page
- 所选页码(从1开始)
当页面通过用户交互或编程方式更改时
change
page
- 所选页码(从1开始)
当页面通过用户交互更改时
导入单个组件
可以通过以下命名导出将各个组件导入到项目中:
组成部分
命名导出
导入路径
<b-pagination>
BPagination
bootstrap-vue
例子:
import { BPagination } from 'bootstrap-vue'
Vue.component('b-pagination' , BPagination)
作为Vue.js插件导入
这个插件包括上面列出的所有独立组件。插件还包括任何组件别名。
Named Export
Import Path
PaginationPlugin
bootstrap-vue
例子:
import { PaginationPlugin } from 'bootstrap-vue'
Vue.use(PaginationPlugin)