网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
Vue.js分页组件,可以对任何内容进行分页。
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. 所有默认配置项。
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'
}
转载请注明来源:Vue.js(vue-sliding-pagination)分页组件
本文永久链接地址:https://www.moyouyouw.cn/code/1084.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论