Vue 可访问的分页组件– vue-sliding-pagination

Vue 可访问的分页组件– vue-sliding-pagination
插件名称 vue-sliding-pagination
版本号 v1.3.1
发布时间 2020年5月20日
插件作者 eFrane

用于Vue.js应用程序的可访问(对ARIA友好)的分页组件,可通过精美的分页体验对任何内容进行分页。

安装和下载:

# Yarn
$ yarn add vue-sliding-pagination

# NPM
$ npm install vue-sliding-pagination --save

使用:

1.在您的应用程序中导入vue-sliding-pagination组件。

import SlidingPagination from 'vue-sliding-pagination'

2.将分页组件添加到模板,如下所示:

<template>
  <sliding-pagination
    :current="current"
    :total="total"
    @page-change="onPageChange"
  >
  </sliding-pagination>
</template>
export default {
  name: 'SimpleExample',
  components: {
    SlidingPagination
  },
  data() {
    return {
      current: 1,
      total: 10
    }
  },
  methods: {
    onPageChange (page) {
      this.current = page
    }
  }
}

3.默认props 来配置分页控件。

ariaPaginationLabel: {
  type: String,
  required: false,
  default: 'Pagination Navigation'
},
ariaGotoPageLabel: {
  type: String,
  required: false,
  default: 'Go to page %page% of %total%'
},
ariaPreviousPageLabel: {
  type: String,
  required: false,
  default: 'Go to previous page'
},
ariaNextPageLabel: {
  type: String,
  required: false,
  default: 'Go to next page'
},
ariaCurrentPageLabel: {
  type: String,
  required: false,
  default: 'Page %page% of %total%, current page'
},
classMap: {
  type: Object,
  required: false,
  default: () => {
    return defaultClassMap
  }
},
current: {
  required: true,
  type: Number
},
total: {
  required: true,
  type: Number
},
slidingEndingSize: {
  required: false,
  type: Number,
  default: 2
},
slidingWindowSize: {
  required: false,
  type: Number,
  default: 3
},
nonSlidingSize: {
  required: false,
  type: Number,
  default: 9
},
pageComponent: {
  required: false,
  type: String,
  default: 'sliding-pagination-default-page'
}

变更日志:

v1.3.1 (06/02/2021)

  • 通过下一个和上一个修复页面导航

v1.3.0 (05/01/2021)

  • 将组件转换为使用渲染功能
  • 增加测试覆盖率
  • 固定插槽替换间隙和页面导航
  • 依赖升级

v1.2.0 (02/28/2021)

  • 从页面点击的事件负载中获取页面

v1.1.2(12/03/2020)

  • 依赖升级

v1.1.1(12/03/2020)

  • 修复Webpack构建

v1.1.0(09/06/2020)

  • 错误修正