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 相关文章推荐
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
jQuery之字体大小的设置方法
Feb 27 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
Dec 02 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
JS回调函数基本定义与用法实例分析
May 24 Javascript
基于BootStrap实现简洁注册界面
Jul 20 Javascript
手动下载Chrome并解决puppeteer无法使用问题
Nov 12 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
浅谈JavaScript 代码简洁之道
Jan 09 Javascript
在Vue项目中使用Typescript的实现
Dec 19 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注入实例
2006/10/09 PHP
excellent!――ASCII Art(由目标图象生成ascii)
2007/02/20 PHP
php文件上传及下载附带显示文件及目录功能
2017/04/27 PHP
php+ajax实现异步上传文件或图片功能
2017/07/18 PHP
Ajax一统天下之Dojo整合篇
2007/03/24 Javascript
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
ModelDialog JavaScript模态对话框类代码
2011/04/17 Javascript
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
深入学习Bootstrap表单
2016/12/13 Javascript
js实现日历与定时器
2017/02/22 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
Jquery $.map使用方法实例详解
2020/09/01 jQuery
快速解决element的autofocus失效问题
2020/09/08 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
Python rstrip()方法实例详解
2018/11/11 Python
pandas 时间格式转换的实现
2019/07/06 Python
Python常驻任务实现接收外界参数代码解析
2020/07/21 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
应届生保险求职信
2013/11/11 职场文书
校园奶茶店创业计划书
2014/01/23 职场文书
道德之星事迹材料
2014/05/03 职场文书
个人合伙协议书范本
2014/10/14 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
浅析MongoDB之安全认证
2021/06/26 MongoDB
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android