Vue.js实现一个自定义分页组件vue-paginaiton


Posted in Javascript onSeptember 05, 2016

vue实现一个分页组件vue-paginaiton

vue使用了一段时间的感触就是,我再也不想直接操作DOM了。数据绑定式的编程体验真是好。实现的一个分页组件。

这里的css就不放出来了,可以看直接去github上下载:vue-pagination

先上一张实例图吧

Vue.js实现一个自定义分页组件vue-paginaiton

模版

<div class="page-bar">
 <ul>
 <li v-if="showFirstText"><a v-on:click="cur--">上一页</a></li>

 <li v-for = "index in pagenums">
 <a v-on:click="pageChange(index)">{{index}}</a>

 </li>

 <li v-if="showNextText"><a v-on:click="cur++">下一页</a></li>
 <li><a>共<i>{{all}}</i>页</a></li>
 </ul>

</div>

Vue.js实现一个自定义分页组件vue-paginaiton

在未引入js前,页面的显示,分析下,all字段简单直接输出即可,{{index}}是分页码这个需要一些动态的渲染。

var app = new Vue({
 el: '#app',
 data:{
 currentpage: 1,
 totlepage: 28,
 visiblepage:10,
 msg: ''
 },
})

调用 new Vue({参数}) 就是创建了一个基本的组件,赋值给变量 app.el就是element的缩写,定位模版的位置.data就是数据了.知道了总页数但是要显示页码还是要一番计算,所以显示页码就是计算属性了.所以我们要用computed

computed: {
 //计算属性:返回页码数组,这里会自动进行脏检查,不用$watch();
 pagenums: function(){
 //初始化前后页边界
 var lowPage = 1;
 var highPage = this.totlepage;
 var pageArr = [];
 if(this.totlepage > this.visiblepage){//总页数超过可见页数时,进一步处理;
 var subVisiblePage = Math.ceil(this.visiblepage/2);
 if(this.currentpage > subVisiblePage && this.currentpage < this.totlepage - subVisiblePage +1){//处理正常的分页
 lowPage = this.currentpage - subVisiblePage;
 highPage = this.currentpage + subVisiblePage -1;
 }else if(this.currentpage <= subVisiblePage){//处理前几页的逻辑
 lowPage = 1;
 highPage = this.visiblepage;
 }else{//处理后几页的逻辑
 lowPage = this.totlepage - this.visiblepage + 1;
 highPage = this.totlepage; 
 }
 }
 //确定了上下page边界后,要准备压入数组中了
 while(lowPage <= highPage){
 pageArr.push(lowPage);
 lowPage ++;
 }

 return pageArr;
 }
 },

观看html模版发现v-if指令.很明显当内容是true就输出,否就没。

重点看下

<li v-for="index in pagenums" v-bind:class="{ active: currentpage == index}">
 <a v-on:click="pageChange(index)">{{ index }}</a>
 </li>

v-for是循环渲染输出计算属性pagenums.每一次循环的子元素赋值给index v-bind:class绑定class,当渲染到目前的角标的时候加个class v-on:click是绑定了事件,我把index当参数传进入了,后面做判断,默认传event事件.
然后我们Vue的选项里面再增加methods字段

methods:{
 pageChange: function(page){
 if (this.currentpage != page) {
 this.currentpage = page;
 this.$dispatch('page-change', page); //父子组件间的通信:==>子组件通过$diapatch(),分发事件,父组件冒泡通过v-on:page-change监听到相应的事件;
 };
 }
 }

组件交互

组件写完了,问题来了,用户点击发生页面改变,你怎么通知其他组件作出相应的变化. 可以在页角发生改变的函数下,插一条语句通知其他组件。不过这种方法是很差的做法。可以使用

watch: {
 currentpage: function(oldValue , newValue){
 console.log(arguments)
 }
}

观察了currentpage数据当它改变的时候,可以获取前后值。然后通知其他组件。

完整的代码可以看 github:vue-pagination

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript基础的动画教程,直观易懂
Jan 10 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
js事件(Event)知识整理
Oct 11 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
Nov 20 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 Javascript
JavaScript 对象创建的3种方法
Nov 17 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
Sep 05 #Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 #Javascript
jQuery实现的导航下拉菜单效果示例
Sep 05 #Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 #Javascript
Vue.js每天必学之数据双向绑定
Sep 05 #Javascript
JS快速实现移动端拼图游戏
Sep 05 #Javascript
jQuery实现的tab标签切换效果示例
Sep 05 #Javascript
You might like
php邮件发送,php发送邮件的类
2011/03/24 PHP
PHP数组无限分级数据的层级化处理代码
2012/12/29 PHP
destoon实现资讯信息前面调用它所属分类的方法
2014/07/15 PHP
Laravel框架实现发送短信验证功能代码
2016/06/06 PHP
JavaScript学习笔记(十)
2010/01/17 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
js实现的map方法示例代码
2014/01/13 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
2019/09/03 Javascript
python获取糗百图片代码实例
2013/12/18 Python
TensorFlow利用saver保存和提取参数的实例
2018/07/26 Python
python用类实现文章敏感词的过滤方法示例
2019/10/27 Python
python中return的返回和执行实例
2019/12/24 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
python super()函数的基本使用
2020/09/10 Python
html5组织文档结构_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML高亮关键字的实现代码
2018/10/22 HTML / CSS
HTML5 localStorage使用总结
2017/02/22 HTML / CSS
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
成人教育自我鉴定
2013/11/01 职场文书
怎样写留学自荐信
2013/11/11 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
经典导游欢迎词大全
2014/01/16 职场文书
新闻专业毕业生英文求职信
2014/03/19 职场文书
实习生个人总结范文
2015/02/28 职场文书
安全伴我行主题班会
2015/08/13 职场文书
导游词之凤凰古城
2019/10/22 职场文书
浅谈Redis中的RDB快照
2021/06/29 Redis
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android