Pagination

分页栏组件

项目状态

版本更新内容请访问 Changelog

如果您的项目正在使用 vue 2.x 版本生态，请使用 v-page 2.x 版本

安装

将 v-page 组件安装到项目中

npmyarnpnpm

npm i v-page

npm i v-page

yarn add v-page

yarn add v-page

pnpm add v-page

pnpm add v-page

全局安装插件

// add component in global scope as plugin
import { createApp } from 'vue'
import App from './app.vue'
import { PaginationBar } from 'v-page'

const app = createApp(App)
app.use(PaginationBar, {
  // globally config options
})
app.mount('#app')

// add component in global scope as plugin
import { createApp } from 'vue'
import App from './app.vue'
import { PaginationBar } from 'v-page'

const app = createApp(App)
app.use(PaginationBar, {
  // globally config options
})
app.mount('#app')

可在全局安装组件时设置的属性

info
pageSizeMenu
language
align
border
pageNumber
first
last

当然，您也可以仅在需要使用的地方引用组件，这也是更加推荐的使用方式。这更有利于代码拆分打包，起到更好的按需引用效果

vue

<template>
  <PaginationBar />
</template>

<script setup>
import { PaginationBar } from 'v-page'
</script>

<template>
  <PaginationBar />
</template>

<script setup>
import { PaginationBar } from 'v-page'
</script>

在页面中应用组件

vue

<template>
  <div
    v-for="item in list"
    :key="item.key"
    v-text="item.name"
  />

  <PaginationBar
    v-model="pageNumber"
    :total-row="totalRow"
    @change="change"
  />
</template>

<script setup>
import { ref } from 'vue'
import { PaginationBar } from 'v-page'

const pageNumber = ref(3)
const totalRow = ref(100)
const list = ref([])
// respond for pagination change
function change (data) {
  console.log(data) // { pageNumber: 1, pageSize: 10 }

  const params = {
    pageNumber: data.pageNumber,
    pageSize: data.pageSize,
    ...
  }
  // do some http request for example
  axios.post('some-api-address', params).then(resp => {
    // fetch new data and update data list and `totalRow` variable
    list.value = resp.list || []
    totalRow.value = resp.totalRow
  })
}
</script>

<template>
  <div
    v-for="item in list"
    :key="item.key"
    v-text="item.name"
  />

  <PaginationBar
    v-model="pageNumber"
    :total-row="totalRow"
    @change="change"
  />
</template>

<script setup>
import { ref } from 'vue'
import { PaginationBar } from 'v-page'

const pageNumber = ref(3)
const totalRow = ref(100)
const list = ref([])
// respond for pagination change
function change (data) {
  console.log(data) // { pageNumber: 1, pageSize: 10 }

  const params = {
    pageNumber: data.pageNumber,
    pageSize: data.pageSize,
    ...
  }
  // do some http request for example
  axios.post('some-api-address', params).then(resp => {
    // fetch new data and update data list and `totalRow` variable
    list.value = resp.list || []
    totalRow.value = resp.totalRow
  })
}
</script>

实例

快速应用

vue

<template>
  <PaginationBar
    :total-row="21"
    language="cn"
    @change="changeBasic"
  />
</template>

<template>
  <PaginationBar
    :total-row="21"
    language="cn"
    @change="changeBasic"
  />
</template>

分页事件 change 响应数据

画廊数据展示模式实例

vue

<template>
  <div>
    <div
      v-for="item in listGallery"
      :key="item"
      v-text=item
    />
  </div>
  <PaginationBar
    align="left"
    language="cn"
    :total-row="88"
    @change="changeGallery"
  />
</template>

<script setup>
import { ref } from 'vue'
import { PaginationBar } from 'v-page'

const srcList = Array(88).fill(0).map((val, index) => index + 1)
const listGallery = ref([])

function changeGallery ({ pageNumber, pageSize }) {
  const start = pageSize * (pageNumber - 1)
  const end = (start + pageSize) > srcList.length
    ? srcList.length
    : start + pageSize
  listGallery.value = srcList.filter((val, index) => {
    return index >= start && index < end
  })
}
</script>

<template>
  <div>
    <div
      v-for="item in listGallery"
      :key="item"
      v-text=item
    />
  </div>
  <PaginationBar
    align="left"
    language="cn"
    :total-row="88"
    @change="changeGallery"
  />
</template>

<script setup>
import { ref } from 'vue'
import { PaginationBar } from 'v-page'

const srcList = Array(88).fill(0).map((val, index) => index + 1)
const listGallery = ref([])

function changeGallery ({ pageNumber, pageSize }) {
  const start = pageSize * (pageNumber - 1)
  const end = (start + pageSize) > srcList.length
    ? srcList.length
    : start + pageSize
  listGallery.value = srcList.filter((val, index) => {
    return index >= start && index < end
  })
}
</script>

分页操作

几个实例展示分页码的操作方式

vue

<template>
  <div>
    <input type="text" v-model="inputPageNumber" />
    <button type="button" @click="goToInputPage" >go</button>
    <button type="button" @click="pageNumberOperate++" >pageNumber + 1</button>
  </div>

  <PaginationBar v-model="pageNumberOperate" />
</template>

<script setup>
import { ref } from 'vue'

const pageNumberOperate = ref(3)
const inputPageNumber = ref('2')

function goToInputPage () {
  if (!inputPageNumber.value) return

  const newPageNumber = Number(inputPageNumber.value)

  if (window.isNaN(newPageNumber)) {
    inputPageNumber.value = ''
    return
  }
  pageNumberOperate.value = newPageNumber
}
</script>

<template>
  <div>
    <input type="text" v-model="inputPageNumber" />
    <button type="button" @click="goToInputPage" >go</button>
    <button type="button" @click="pageNumberOperate++" >pageNumber + 1</button>
  </div>

  <PaginationBar v-model="pageNumberOperate" />
</template>

<script setup>
import { ref } from 'vue'

const pageNumberOperate = ref(3)
const inputPageNumber = ref('2')

function goToInputPage () {
  if (!inputPageNumber.value) return

  const newPageNumber = Number(inputPageNumber.value)

  if (window.isNaN(newPageNumber)) {
    inputPageNumber.value = ''
    return
  }
  pageNumberOperate.value = newPageNumber
}
</script>

对齐方向

vue

<PaginationBar align="left" />

<PaginationBar align="left" />

指定对齐方向

显示边框模式

vue

<PaginationBar :border="true" />

<PaginationBar :border="true" />

启用与禁用

vue

<PaginationBar :disabled="true" />

<PaginationBar :disabled="true" />

启用禁用

功能模块的启用与关闭

设置分页栏模块的启用与关闭

插槽

v-page 提供了作用域插槽，输出分页栏核心状态数据，方便进行功能定制

vue

<template>
  <PaginationBar
    border
    align="left"
    :total-row="28"
    :page-size-menu="false"
    :info="false"
    :first="false"
    :last="false"
    v-slot="{ pageNumber, pageSize, totalPage, totalRow, isFirst, isLast }"
  >
    <div>
      <div>page: <span v-text="pageNumber" /></div>
      <div>pageSize: <span v-text="pageSize" /></div>
      <div>totalPage: <span v-text="totalPage" /></div>
      <div>totalRow: <span v-text="totalRow" /></div>
      <div>isFirst: <span v-text="isFirst" /></div>
      <div>isLast: <span v-text="isLast" /></div>
    </div>
  </PaginationBar>
</template>

<template>
  <PaginationBar
    border
    align="left"
    :total-row="28"
    :page-size-menu="false"
    :info="false"
    :first="false"
    :last="false"
    v-slot="{ pageNumber, pageSize, totalPage, totalRow, isFirst, isLast }"
  >
    <div>
      <div>page: <span v-text="pageNumber" /></div>
      <div>pageSize: <span v-text="pageSize" /></div>
      <div>totalPage: <span v-text="totalPage" /></div>
      <div>totalRow: <span v-text="totalRow" /></div>
      <div>isFirst: <span v-text="isFirst" /></div>
      <div>isLast: <span v-text="isLast" /></div>
    </div>
  </PaginationBar>
</template>

page: 0
pageSize: 10
totalPage: 3
totalRow: 28
isFirst: false
isLast: false
«
1
2
3
»

显示全部数据选项

在 每页记录数 栏增加显示全部数据的选项，用于设置数据展示栏显示全部数据，不进行分页。选择该项目后，change 事件的响应数据如下

{
  pageNumber: 1,
  pageSize: 0
}

{
  pageNumber: 1,
  pageSize: 0
}

Props

v-model/value

类型 number

设置默认页/当前页

total-row

类型 number

每次数据查询中的总记录数，在父组件进行数据查询后，必须更新插件的总记录数参数

language

类型 string
默认 'en'

指定分页栏语言，完整语言清单

'cn' 简体中文
'en' English
'de' German
'pt' Portuguese
'jp' Japanese

类型 number[] | boolean
默认 [10, 20, 50, 100]

分页尺寸列表, 可设置 false 来关闭该栏

align

类型 'left' | 'center' | 'right'
默认 'right'

分页栏对齐方向

disabled

类型 boolean
默认 false

启用/禁用分页栏

info

类型 boolean
默认 true

显示分页信息栏

border

类型 boolean
默认 false

显示边框模式

page-number

类型 boolean
默认 true

显示分页码模块

first

类型 boolean
默认 true

显示首页按钮

last

类型 boolean
默认 true

显示尾页按钮

display-all

类型 boolean
默认 false

在每页记录数列表中增加显示所有数据记录项目

事件

组件各类操作的响应事件

change

分页栏操作发生数据变更时，触发的响应事件

change: (data: PageInfo) => void

change: (data: PageInfo) => void

interface PageInfo {
  // 当前分页号
  pageNumber: number
  // 每页显示记录数
  pageSize: number
}
// 也可以通过以下的方式直接使用类型
import type { PageInfo } from 'v-page/types'

interface PageInfo {
  // 当前分页号
  pageNumber: number
  // 每页显示记录数
  pageSize: number
}
// 也可以通过以下的方式直接使用类型
import type { PageInfo } from 'v-page/types'

API

使用插件的 API 前，需为组件声明 ref 属性，并使用 ref() 声明对应名称的响应式变量以调用 API 方法

vue

<template>
  <PaginationBar ref="page" />
</template>

<script setup>
import { ref } from 'vue'
import { PaginationBar } from 'v-page'

const page = ref(null)
// call api
page.value.goPage(3)
</script>

<template>
  <PaginationBar ref="page" />
</template>

<script setup>
import { ref } from 'vue'
import { PaginationBar } from 'v-page'

const page = ref(null)
// call api
page.value.goPage(3)
</script>

goPage

切换当前页

goPage: (page: number) => void

goPage: (page: number) => void

reload

更新分页信息及事件

reload: () => void

reload: () => void

Pagination ​

安装 ​

在页面中应用组件 ​

实例 ​

快速应用 ​

画廊数据展示模式实例 ​

分页操作 ​

对齐方向 ​

显示边框模式 ​

启用与禁用 ​

功能模块的启用与关闭 ​

插槽 ​

显示全部数据选项 ​

Props ​

v-model/value ​

total-row ​

language ​

page-size-menu ​

align ​

disabled ​

info ​

border ​

page-number ​

first ​

last ​

display-all ​

事件 ​

change ​

API ​

goPage ​

reload ​

Pagination

安装

在页面中应用组件

实例

快速应用

画廊数据展示模式实例

分页操作

对齐方向

显示边框模式

启用与禁用

功能模块的启用与关闭

插槽

显示全部数据选项

Props

v-model/value

total-row

language

page-size-menu

align

disabled

info

border

page-number

first

last

display-all

事件

change

API

goPage

reload