Pagination

GITHUB

To create full featured pagination element use this component.


Code:

  
HTML
<!-- With total count --> <fvPagination :value="currentPage" :total="total" @input="currentPage = $event" /> <!-- Without total count --> <fvPagination :value="currentPage2" :next="true" @input="currentPage2 = $event" />
  
export default { data () { return { currentPage: 1, currentPage2: 1, total: 22 } } }

Examples:











Notes:

  • If you click on selected page button in run-time, you can change current page by custom number.

API:

NameTypeDefaultDescription
value
Number
1
Selected page number.
total
Number
1
Total pages count. if you havn't, you can play with the navigation, next and prev props and leave it.
size
Number
5
Length of pages appear to pagination. if you dont set total, it's not affect.
navigation
Boolean
true
Visibility of next/prev buttons.
next
Boolean
true
Handle disabled state of next button. If you dont set navigation. It's not usable. Also if you set the total and navigation props together, component consider this as false if value equal to total.
prev
Boolean
true
Handle disabled state of prev button. If you dont set navigation. It's not usable. Also if you set the total and navigation props together, component consider this as false if value equal to 1.