分页导航(Pagination Navigation)

快速第一，上一，下一，最后和页面按钮，用于基于导航的分页，支持常规链接或路由器链接。

b-pagination-nav将尝试根据当前页面的URL （通过$route detection或 （如果未检测到$router）浏览器位置URL）自动检测哪个页面链接是活动页面按钮。

注意: <b-pagination-nav> 用于导航到新页面url。要控制页内组件分页（如表或列表分页）， 请改用<b-pagination>组件。 

<template>
  <div class="overflow-auto">
    <b-pagination-nav :link-gen="linkGen" :number-of-pages="10" use-router></b-pagination-nav>
  </div>
</template>

<script>
  export default {
    methods: {
      linkGen(pageNum) {
        return pageNum === 1 ? '?' : `?page=${pageNum}`
      }
    }
  }
</script>

<b-pagination-nav>是提供导航分页的自定义输入组件。 用页数属性设置的总页数。页码是从1到页数的索引。

页面链接和编号生成

默认情况下，<b-pagination-nav>生成基本url标记，将ref属性设置为与页码连接的基本url。基本url属性默认为“/”。页数是通过页数属性指定的。页数是从1到页数的数字。

要将页面链接生成为 <router link>组件 （或者如果检测到Nuxt.js 则生成<nuxt-link>）， 请设置use-router属性。然后，HREF将成为路由器链接的to属性。 或者，可以选择使用链接生成器函数将路由器链接返回到 位置对象。

如果在应用程序中未检测到$router， <b-pagination-nav>将回退到常规的 <a>元素， 并且任何 to location对象将转换为标准URL（如果可能）。

支持以下路由器链接特定的属性：

  • active-class
  • exact
  • exact-active-class
  • no-prefetch (<nuxt-link> 特殊属性)

有关上述道具的详细信息，请参阅路由器链接支持参考部分。

如果需要对生成的链接url进行更细粒度的控制或将<router-link> 设置为props， 则可以将link-gen属性设置为接收两个参数的函数引用：页码和包含两个字段 （link和 page）的对象，其中page是页码， link是内部生成的链接。

link-gen函数应该返回一个字符串（用于ref）或一个路由器到对象。 如果返回的值是一个对象，则始终会生成路由器链接（如果检测到$router）。 如果返回值是字符串，则默认情况下会生成标准链接，除非设置了use-router属性。 如果使用了to location对象，那么 基本url属性将不起作用。 

export default {
  methods: {
    // For regular HREF (or string `to` prop if `use-router` is set)
    linkGen(pageNum) {
      return `/foo/page/${pageNum}`
    },

    // Returning a router-link `to` object
    linkGen(pageNum) {
      return { path: `/foo/page/${pageNum}` }
    },

    // Returning a router-link `to` object with query parameters
    linkGen(pageNum) {
      return {
        path: '/foo/',
        query: { page: pageNum }
      }
    },

    // Returning a router-link `to` object with named route and parameters
    linkGen(pageNum) {
      return {
        name: 'posts',
        params: { post: pageNum }
      }
    }
  }
}

注意: 当从to location对象返回到标准链接时（当没有可用的$router时），只有以下位置属性用于生成URL：

  • path (如果未提供，则默认为页面的当前URL路径)
  • query
  • hash (如果使用，必须包含前导#)

不支持 名称路由和 参数的转换。

页码生成

默认情况下，<b-pagination-nav>在页面链接按钮中呈现页码（1-N）。 您可以通过向page-gen属性提供函数引用来重写此行为。函数引用应该接受一个单独的参数，即页码（1-N）。 page-gen函数应该返回一个字符串。

注意: 不支持生成的页码字符串中的HTML内容。对于基本HTML，可以使用作用域槽页进行更细粒度的格式化。

示例：使用链接数组生成分页：

<template>
  <div class="overflow-auto">
    <b-pagination-nav
      :link-gen="linkGen"
      :page-gen="pageGen"
      :number-of-pages="links.length"
    ></b-pagination-nav>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        links: ['#foo', '#bar', '#baz', '#faz']
      }
    },
    methods: {
      linkGen(pageNum) {
        return this.links[pageNum - 1]
      },
      pageGen(pageNum) {
        return this.links[pageNum - 1].slice(1)
      }
    }
  }
</script>

提供页面数组

您可以通过pages属性传递一个链接数组，而不是使用 Rather than using 页数来自动生成页面链接。 当pages属性的数组长度为1或更大时，它将用于生成页面链接。

数组可以是以下两种格式之一：

  • 字符串数组，其中每个条目都是一个链接。 在这种模式下，页面按钮的编号将自动设置为1 至阵列中的条目数。
  • 对象数组，其中每个对象有两个字段：链接（必需）和文本（可选）。链接可以是指定链接的字符串，也可以是to location对象。文本将是页面链接按钮的内容。如果省略文本，则页面按钮内容将默认为页码。

当提供字符串链接时，<b-pagination-nav>将使用 常规的<a>元素，除非设置了 use-router属性。 当link（在array of objects表单中）是 to location对象时，将自动生成路由器链接（如果检测到$router）。

使用数组格式时，链接字符串（和/或位置对象）用作as，并且基本url属性将被忽略。 

<template>
  <b-pagination-nav :pages="pages1" use-router></b-pagination-nav>
  <b-pagination-nav :pages="pages2" use-router></b-pagination-nav>
  <b-pagination-nav :pages="pages3" use-router></b-pagination-nav>
</template>

<script>
export default {
  data() {
    return {
      // Simple array of strings
      pages1: ['?page=1', '?page=2', '?page=3'],
      // Array of objects with string links
      pages2: [
        { link: '?page=1', text: 'One' },
        { link: '?page=2', text: 'Two' },
        { link: '?page=3', text: 'Three' }
      ],
      // Array of objects with router `to` locations
      pages3: [
        { link: { query: { page: 1 } }, text: 'Page 1' },
        { link: { query: { page: 2 } }, text: 'Page 2' },
        { link: { query: { page: 3 } }, text: 'Page 3' }
      ]
    }
  }
}
</script>

自定义外观

限制显示按钮的数量

要限制显示的页面按钮数（包括省略号，但不包括第一个、上一个、下一个和最后一个按钮），请使用limit属性指定所需的页面按钮数（包括省略号，如果显示）。 默认限制为5。支持的最小值为3。 当limit设置为3时，出于实际目的，不会显示省略号指示器。

通过设置hide-goto-end-buttons属性，可以选择隐藏 第一个 和 最后一个 。

通过设置隐藏省略号属性，可以选择性地禁用省略号的显示。

小屏幕支持

在较小的屏幕（即移动屏幕）上，一些<b-pagination-nav>按钮将被隐藏，以最小化分页界面包装到多行的可能性：

  • 省略号指示符将隐藏在 xs或更小的屏幕上。
  • 页码按钮将限制为在xs屏幕上最多可见3个或更小。

这样可以确保不超过3个页码按钮以及“转到第一页”、“上一页”、“下一页”和“最后一页”按钮可见。

按钮内容

<b-pagination-nav>支持多个道具/插槽，允许您自定义外观。 所有的*-text属性都是纯文本的，去掉了HTML，但是您可以使用它们相同名称的插槽对应项。

有关所有可用插槽的完整列表，请参阅下面的Slots部分。 

<template>
  <div class="overflow-auto">
    <!-- Use text in props -->
    <b-pagination-nav
      number-of-pages="10"
      base-url="#"
      first-text="First"
      prev-text="Prev"
      next-text="Next"
      last-text="Last"
    ></b-pagination-nav>

    <!-- Use emojis in props -->
    <b-pagination-nav
      number-of-pages="10"
      base-url="#"
      first-text="⏮"
      prev-text="⏪"
      next-text="⏩"
      last-text="⏭"
      class="mt-4"
    ></b-pagination-nav>

    <!-- Use HTML and sub-components in slots -->
    <b-pagination-nav
      number-of-pages="10"
      base-url="#"
      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-nav>
  </div>
</template>

slo页面始终具有作用域，而slots first-text, prev-text, next-text和 last-text可以选择作用域。省略文本槽没有作用域。

页面可用的作用域变量属性：

属性 类型 描述
page Number 页码（从1到页码）
index Number 页码（从0索引到页码 -1）
active Boolean 如果该页是活动页
disabled Boolean 如果页面按钮被禁用
content String 默认内容，或页面生成函数的结果

第一个文本, 上一个文本, 下一个文本和 最后一个文本 槽可用的作用域变量属性：

属性 类型 描述
page Number 页码（从 1到页码）
index Number 页码（从0索引到页码-1）
disabled Boolean 如果页面按钮被禁用

转到第一个/最后一个按钮类型

如果希望有带有第一个和最后一个页码的按钮转到相应的页面，请使用第一个页码和 最后一个页码属性。

Goto first button number
Goto last button number
Goto first and last button number
<template>
  <div class="overflow-auto">
    <div>
      <h6>Goto first button number</h6>
      <b-pagination-nav
        v-model="currentPage"
        :number-of-pages="pages"
        base-url="#"
        first-number
      ></b-pagination-nav>
    </div>

    <div class="mt-3">
      <h6>Goto last button number</h6>
      <b-pagination-nav
        v-model="currentPage"
        :number-of-pages="pages"
        base-url="#"
        last-number
      ></b-pagination-nav>
    </div>

    <div class="mt-3">
      <h6>Goto first and last button number</h6>
      <b-pagination-nav
        v-model="currentPage"
        :number-of-pages="pages"
        base-url="#"
        first-number
        last-number
      ></b-pagination-nav>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pages: 100,
        currentPage: 5
      }
    }
  }
</script>

按钮大小

通过将“size”属性设置为“'sm'”表示较小的按钮， 或将“'lg'”表示较大的按钮，可以选择从默认按钮大小更改为“'sm'”。

Small
Default
Large
<template>
  <div class="overflow-auto">
    <div>
      <h6>Small</h6>
      <b-pagination-nav size="sm" number-of-pages="10" base-url="#"></b-pagination-nav>
    </div>

    <div class="mt-3">
      <h6>Default</h6>
      <b-pagination-nav number-of-pages="10" base-url="#"></b-pagination-nav>
    </div>

    <div class="mt-3">
      <h6>Large</h6>
      <b-pagination-nav size="lg" number-of-pages="10" base-url="#"></b-pagination-nav>
    </div>
  </div>
</template>

Pill 样式

通过设置pills属性轻松切换到pill样式按钮

Small Pills
Default Pills
Large Pills
<template>
  <div class="overflow-auto">
    <div>
      <h6>Small Pills</h6>
      <b-pagination-nav pills size="sm" number-of-pages="10" base-url="#"></b-pagination-nav>
    </div>

    <div class="mt-3">
      <h6>Default Pills</h6>
      <b-pagination-nav pills number-of-pages="10" base-url="#"></b-pagination-nav>
    </div>

    <div class="mt-3">
      <h6>Large Pills</h6>
      <b-pagination-nav pills size="lg" number-of-pages="10" base-url="#"></b-pagination-nav>
    </div>
  </div>
</template>

注意: pill样式需要BootstrapVue的自定义CSS/SCSS。

对齐

默认情况下，分页组件是左对齐的。通过将属性align设置为适当的值，将align更改为 center, right ( right是end的别名）或fill。

Left alignment (default)
Center alignment
Right (end) alignment
Fill alignment
<template>
  <div class="overflow-auto">
    <div>
      <h6>Left alignment (default)</h6>
      <b-pagination-nav number-of-pages="10" base-url="#"></b-pagination-nav>
    </div>

    <div class="mt-3">
      <h6 class="text-center">Center alignment</h6>
      <b-pagination-nav number-of-pages="10" base-url="#" align="center"></b-pagination-nav>
    </div>

    <div class="mt-3">
      <h6 class="text-right">Right (end) alignment</h6>
      <b-pagination-nav number-of-pages="10" base-url="#" align="right"></b-pagination-nav>
    </div>

    <div class="mt-3">
      <h6 class="text-center">Fill alignment</h6>
      <b-pagination-nav number-of-pages="10" base-url="#" align="fill"></b-pagination-nav>
    </div>
  </div>
</template>

自动当前页检测和v-model支持

<b-pagination-nav>将根据页面的当前URL或$route（如果检测到路由器）， 尝试并自动检测哪个页面按钮应处于活动状态。如果无法检测到页面，则没有页码按钮处于活动状态，在单击页面按钮之前，第一个、上一个、下一个和最后一个按钮将处于禁用状态。

v-model是可选支持的（由输入事件更新，并绑定到值属性）。 最初将v-model设置为null（默认值）将触发自动活动页面检测， 随后将使用当前页码（从1到页数的索引）进行更新。如果最初将v-model设置为1或更大的值， 则不会进行自动页面检测（直到用户单击页面按钮之后），v-model指定的页面将设置为活动页面。

要禁用自动活动页面检测，请将无页面检测属性设置为true。

注意: 自动页面检测需要遍历所有可能的页面链接，直到检测到匹配。对于更多的页面，此检查可能需要一些时间，因此您可能希望通过v-model和 no-page-detect属性手动控制哪个页面处于活动状态。

可访问性

<b-pagination-nav>组件提供了许多支持辅助技术用户的功能， 例如aria属性和键盘导航。

ARIA标签

<b-pagination-nav>提供各种*-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-nav>支持现成的键盘导航， 并遵循 WAI-ARIA roving tabindex模式。

  • 切换到分页组件将自动聚焦当前活动页按钮
  • LEFT (或 UP)和 RIGHT (或 DOWN)箭头键将分别聚焦页面列表中的上一个和下一个按钮
  • ENTER或SPACE键将选择（单击）当前聚焦的页面按钮
  • 按TAB键将移动到页面上的下一个控件或链接，而按SHIFT+TAB键将移动到页面上的上一个控件或链接。

另请参阅

请参阅路由器支持参考页以获取路由器链接特定的道具。

对于组件的分页控制（例如<b-table>）， 请改用<b-pagination>组件。

组件引用

<b-pagination-nav>

View source

属性

属性 (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 Hides the goto first and goto last page buttons
aria-label String 'Pagination' 隐藏“转到第一页”和“转到最后一页”按钮
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”
number-of-pages Number or String 1 总页数
base-url String '/' 自动生成页面链接时使用的基本URL
use-router Boolean false 自动生成页面链接时，渲染路由器链接而不是链接
link-gen Function 链接生成器功能。 有关详细信息，请参阅文档
page-gen Function 页码生成器功能。 有关详细信息，请参阅文档
pages Array 页码和链接数组
no-page-detect Boolean false 禁用自动检测当前页面
active-class String router-link属性：配置在链接处于活动状态时应用的活动CSS类。 通常，您将需要将此设置为类名称“ active”
exact Boolean false router-link属性：默认的活动类匹配行为是包含匹配。 设置此道具会强制模式与路线完全匹配
exact-active-class String router-link属性：配置当链接处于完全匹配状态时应用的活动CSS类。 通常，您将需要将此设置为类名称“ active”
no-prefetch Boolean false nuxt-link属性：为了提高Nuxt.js应用程序的响应速度，当链接将显示在视口中时，Nuxt.js将自动预取代码拆分页面。 设置“不预取”将禁用特定链接的此功能

<b-pagination-nav> 支持生成<router-link>或 <nuxt-link>组件（如果使用nuxt.js）。 有关路由器链接（或nuxt链接）特定属性的更多详细信息，请参阅路由器支持参考部分。

v-model

属性 事件
value input

Slots

Slot 名称 描述 范围
first-text “转到第一页”按钮内容。可选范围
prev-text “转到上一页”按钮内容。可选范围
next-text “转到下一页”按钮内容。可选范围
last-text “转到最后一页”按钮内容。可选范围
ellipsis-text “…”指示器内容。未限定范围
page 页码按钮内容。始终限定范围

事件

事件 参数 描述
input
  1. page - 所选页码（以1开头），如果找不到页，则为空
 当页面通过用户交互或编程方式更改时
change
  1. page - 所选页码（从1开始）
 当页面通过用户交互更改时

导入单个组件

可以通过以下命名导出将各个组件导入到项目中：

组成部分 命名导出 导入路径
<b-pagination-nav> BPaginationNav bootstrap-vue

例子:

import { BPaginationNav } from 'bootstrap-vue'
Vue.component('b-pagination-nav', BPaginationNav)

作为Vue.js插件导入

这个插件包括上面列出的所有独立组件。插件还包括任何组件别名。

命名导出 导入路径
PaginationNavPlugin bootstrap-vue

例子:

import { PaginationNavPlugin } from 'bootstrap-vue'
Vue.use(PaginationNavPlugin)