A Plugin for pagination
<div id="app">
<am-pagination
prev-text="«"
next-text="»"
first-text="««"
last-text="»»"
:rotate="rotate"
:item-totals="totals"
:force-ellipses="true"
:page.sync ="current"
:max-size="7"
:hide-if-empty="false"
active-class="active-green"
@page-change="pageChange"
:page-size="psize">
<!--define template ,you can delete it-->
<!--begin-->
<a slot-scope="{index}" >
{{index+1+'~'}}
</a>
<a slot="boundary-last-numbers" slot-scope="{index}">
{{index+1+'~'}}
</a>
<a href="#" slot="boundary-first-numbers" slot-scope="{index}">
{{index + 1 + ' fixed'}}
</a>
<!--end-->
</am-pagination>
<hr />
<button @click="moveTo">move to {{current}}</button>
<button @click="chsize">pageSize : {{psize}}</button>
<button @click="chtotal">item totals : {{totals}}</button>
<button @click="switchrotate">switch rotate : {{rotate}}</button>
<span>{{'page totals:' + pagetotal }}</span>
</div>
import ampag from 'vue-am-pagination'
Vue.use(ampag);
methods: {
pageChange(from,to){
console.log(from +":" + to);
}
},
data () {
return {
current:2,
msg: 'Welcome to vue-am-pagination',
psize:2
}
}