1.0.4 • Published 5 years ago
vue-simple-pager v1.0.4
vue-simple-pager
an all-round pagination component based on vue
Test
clone this repo
cd vue-simple-pager
npm install .
npm run test
open your browser and request http://localhost:8080/test/test.html
Usage
npm install vue-simple-pager
for simple usage, you only need transfer props as follow:
props: {
totalPage: { // total
type: Number,
default: 1,
required: true
},
showItems: { // such as 1 ... 34[5]67 ... 10
type: Number,
default: 5
},
showPrev: { // whether to show 'Prev'
type: Boolean,
default: true
},
showNext: { // whether to show 'Next'
type: Boolean,
default: true
},
showJump: { // whether to show 'Go'
type: Boolean,
default: true
},
initPage: { // initial page
type: Number,
default: 1
},
// these are used for translations
textPrevious: {
type: String,
default: "上一页"
},
textNext: {
type: String,
default: "下一页"
},
textPage: {
type: String,
default: "页"
},
textTotal: {
type: String,
default: "共"
},
textSet: {
type: String,
default: "确定"
},
textJump: {
type: String,
default: "页 ,跳至"
}
when page changed, it will emit an event named 'go-page', so in your template:
<div id="app">
<pager
:total-page="totalPage"
:init-page="page"
@go-page="goPage"></pager>
<p>page: {{page}}</p>
</div>
in your js:
import pager from 'vue-simple-pager'
new Vue({
el: '#app',
data () {
return {
page: 1,
totalPage: 10
}
},
methods: {
goPage (data) {
this.page = data.page
}
},
components: {
'pager': pager
}
})
for more usage:
When using vue-router
, usually there is a need that different page can be put in history so that we can navigate them by using browser [go,back]
buttons.
Now you only need to add two props:
{
mode: { // 3 modes are supported : 'event' | 'query' | 'params'
type: String,
default: 'event'
},
routeName: { // if mode == 'params', a routeName is required
type: String
}
}
For more usage detail, see the test example
License
MIT