今天记录用vuejs2来写一个分页组件
有些注解定义我说的并不是很准确，主要是方便自己理解写的，请大家包涵 ...
代码的github网址 : https://github.com/fengliting/vue-page，里面给了详细的注解和补充一些方法
页面的html
<!-- 分页 -->
<m-page @on-bottompage="bottompage"></m-page>
//定义组件
Vue.component("m-page",{
//定义初始化的一些数据
data:function(){
return {
inputppage:'',
pagenums:10,
cur:1,
}
},
//拿到父组件传过来的值
props:['bottompage'],
//模板html，会显示到html
template:`
<div class="Activepage">
<div class="row">
<div class="col-sm-6">
<ul class="pagination" v-cloak>
<li :class="{'disabled':cur == 1}"><a @click="cur--,pageclick()" >‹</a></li>
<li :class="{'active':cur == index}" v-for="index in indexs"><a @click="btnclick(index,$event)">{{index}}</a></li>
<li :class="{'disabled':cur == pagenums}"><a @click="cur++,pageclick()" >›</a></li>
</ul>
</div>
<div class="col-sm-6 page-confirm">
共 {{pagenums}} 页 到第 <input type="text" name="page_id" class="no-width-form-control text-center" v-model="inputpage" size="1"> 页\
<button type="button" class="btn btn-primary" @click="pagesubmit($event)">确定</button>
</div>
</div>
</div>
`，
//事件处理器，定义方法都写这里
methods:{
pagesubmit:function(){
this.$emit("on-bottompage", this.inputpage);
this.cur = this.inputpage
},
btnclick:function(){
this.$emit("on-bottompage",index);
if(index!=this.cur){
this.cur = index}
},
pageclick:function(){
this.$emit("on-bottompage",this.cur)
}
},
//计算属性
computed:{
indexs:function(){
var left = 1;
var right = this.pagenums;
var arr = [];
// 展示底部的分页一直有5个
if (this.pagenums >= 5) {
if (this.cur > 3 && this.cur < this.pagenums - 2) {
//这里有个坑，一定要记得转化为parseInt
left = parseInt(this.cur) - 2
right = parseInt(this.cur) + 2
} else {
if (this.cur <= 3) {
left = 1
right = 5
} else {
right = this.pagenums
left = this.pagenums - 4
}
}
}
while (left <= right) {
arr.push(left)
left++
}
// console.log(arr)
return arr
}
},
})
//实例接收子组件的方法
new Vue({
el:'#page',
data:{
},
methods:{
bottompage:function(inputpage){
console.log('向父集传送当前页码'+inputpage)
}
}
})
代码的github网址 : https://github.com/fengliting/vue-page，里面给了详细的注解和补充一些方法，如果喜欢给颗星星吧