用vuejs写一个分页组件
来源:互联网 发布:淘宝皇冠店铺出租 编辑:程序博客网 时间:2024/06/11 06:54
今天记录用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,里面给了详细的注解和补充一些方法,如果喜欢给颗星星吧
阅读全文
0 0
- 用vuejs写一个分页组件
- vueJs写一个分页
- vueJS组件
- 自己写的一个有点不同的分页组件,缓存三页的分页组件
- 一个分页组件
- 一个JSP分页组件
- 一个JSP分页组件
- 一个JSP分页组件
- jquery 写的分页组件
- 用Jquery写的一个分页插件
- 用MFC写一个COM组件
- VueJs的组件化
- vuejs 组件+路由
- vuejs学习“递归组件”
- vuejs父子组件通信
- vuejs 常用ui组件
- vuejs组件系统
- vuejs组件使用问题
- jQuery.validate自定义验证
- android从assets中获取json数据
- springboot源码分析9-random的使用以及原理
- docker-compose安装和使用
- 【Scikit-Learn 中文文档】三十八:成对的矩阵, 类别和核函数
- 用vuejs写一个分页组件
- 2017.12.6
- session和cookie总结,看完以下三篇文章就可以较好的理解了
- crontab使用方法
- docker私有仓库和监控及报警环境搭建
- 二进制图像矩阵转换为向量
- mysql--用户管理
- 《Thing in Java》对final关键字的介绍之数据
- SVN E200009 which is not part of the commit; both sides of the move must be committed together