用vuejs写一个分页组件
2017-12-06 14:39
281 查看
今天记录用vuejs2来写一个分页组件
有些注解定义我说的并不是很准确,主要是方便自己理解写的,请大家包涵 ...
代码的github网址 : https://github.com/fengliting/vue-page,里面给了详细的注解和补充一些方法,如果喜欢给颗星星吧
页面的html
4000
<!-- 分页 -->
<m-page @on-bottompage="bottompage"></m-page>
解释:@on-bottompage="bottompage":点击提交分页的方法,这个也是绑定到vm实例里面的方法,相当于子组件传信息给到父组件,如果解释看不是很懂,等会看代码
//定义组件
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,里面给了详细的注解和补充一些方法,如果喜欢给颗星星吧
有些注解定义我说的并不是很准确,主要是方便自己理解写的,请大家包涵 ...
代码的github网址 : https://github.com/fengliting/vue-page,里面给了详细的注解和补充一些方法,如果喜欢给颗星星吧
页面的html
4000
<!-- 分页 -->
<m-page @on-bottompage="bottompage"></m-page>
解释:@on-bottompage="bottompage":点击提交分页的方法,这个也是绑定到vm实例里面的方法,相当于子组件传信息给到父组件,如果解释看不是很懂,等会看代码
//定义组件
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,里面给了详细的注解和补充一些方法,如果喜欢给颗星星吧
相关文章推荐
- vueJs写一个分页
- dwz分页组件中,一个奇怪的翻页问题的解决
- 一个通用的 分页组件 (转)
- Vue.js学习 Item16 – 实现一个自定义分页组件vue-paginaiton
- vue的一个分页组件的示例代码
- 修改ASP.NET MVC Ajax分页组件ASP.NET MvcPager一个小Bug并修该样式为自己所用(三)
- 一个可复用的vue分页组件
- 使用jquery编写一个分页组件(部分内容并不通用,以后需改善)
- [组件]——从零开始做一个 分页 组件
- vue学习系列-完成一个分页组件的封装
- vue2的一个分页小组件
- 自己写的一个Pager分页组件,WebForm,Mvc都适用
- 主题:一个还算通用的Struts2分页组件
- Creating a Pager Control for ASP.NET以及Dino Esposito 分页组件的一个 Bug
- 手把手教你写一个react分页组件
- VUE实现一个分页组件
- 一个完全独立的、简洁的jquery前端分页组件,用到动态添加页内样式的方法哦。
- 分享一个自己写的简单的javascript分页组件
- 一个分页组件