vue-simple-pager
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
Dependencies
babel-core: ^6.7.7babel-loader: ^6.2.4babel-plugin-transform-runtime: ^6.7.5babel-preset-es2015: ^6.6.0babel-runtime: ^5.8.38css-loader: ^0.23.1vue: ^1.0.21vue-router: ^0.7.13vue-hot-reload-api: ^1.3.2vue-html-loader: ^1.2.2vue-loader: ^8.2.3vue-style-loader: ^1.0.0webpack: ^1.13.0webpack-dev-server: ^1.14.1