今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下~

首先写组件需要考虑:

  1. 要从父组件传哪些必要的参数,即子组件需要提供什么接口
  2. 组件需要去实现哪些功能
  3. 我们要返回哪些参数给用户

针对这几点,做如下分析:

  1. 先上简单的模板:

    <template lang="html">
    <div class="page">
    <ul>
    <li><a v-on:click="prevClick()">上一页</a></li>
    <li v-for="index in pages" v-bind:class="{ active: curPage == index}">
    <a v-on:click="btnClick(index)">{{ index }}</a>
    </li>
    <li><a v-on:click="nextClick()">下一页</a></li>
    <li><a>共<i>{{totalPages}}</i>页</a></li>
    </ul>
    </div>
    </template>
  2. 将父组件传来的数据我们存放在props里,而且我们需要在data里写一个curPage来对应props里的cur,你肯定要问why!!因为vue2.0中要求不能改变props里的值的大小,但是我们这里的cur表示当前选中的页码值,是一个可变的值,那么我们就需要在created中将这两个值对应起来,后面后续就可以直接使用this.curPage了:
    props: {
    dataNum: {
    type: Number
    , default: 100
    }
    , cur: {
    type: Number
    , default:1
    } , each: {
    type: Number
    , default: 10
    }
    , visiblepage: {
    type: Number
    , default: 10
    } }
    , data: function(){
    return {
    curPage:0
    }
    }
    ,created: function(){
    this.curPage = this.cur;
    }
  3. 以上是我们已知的参数了,那么下面我们需要利用它们动态的去计算页码总数和具体要显示的页码:这部分我们放在computed中,具体神马原因移步vue文档啦~~
    computed: {
    totalPages: function(){
    return Math.ceil(this.dataNum / this.each) || 0
    }
    , pages: function(){
    var lowPage = 1;
    var highPage = this.totalPages;
    var pageArr = [];
    if(this.totalPages > this.visiblepage){
    var sub = Math.ceil(this.visiblepage/2);
    if(this.curPage > sub && this.curPage < this.totalPages - sub +1){
    lowPage = this.curPage - sub;
    highPage = this.curPage + sub - 2;
    }else if(this.curPage <= sub){
    lowPage = 1;
    highPage = this.visiblepage;
    }else{
    lowPage = this.totalPages - this.visiblepage + 1;
    highPage = this.totalPages;
    }
    } while(lowPage <= highPage){
    pageArr.push(lowPage);
    lowPage ++;
    }
    return pageArr;
    }
    }
  4. 下面添加我们用到的三个事件:
    methods: {
    btnClick: function(index){
    this.curPage = index;
    this.$emit('change-page', index)
    }
    , nextClick: function() {
    if (this.curPage < this.totalPages) {
    this.curPage++;
    this.$emit('change-page', this.curPage)
    }
    }
    , prevClick: function() {
    if (this.curPage > 0) {
    this.curPage--;
    this.$emit('change-page', this.curPage)
    }
    }
    }
  5. 上面高亮显示的部分下面会重点来讲,结合三个黄色高亮部分,我们在父组件中要使用子组件的当前页码这个值来实现分页,因为vue2.0取消了$dispatch(),所以我们怎么能从子组件把数值传出来呢?这里2.0里用到了$emit()和v-on,所以这里可以看下vue2.0的文档,然后理解一下~我理解了半天才懂。。。脑子也是慢的没谁了。。。
    <div id="app">
    <div class="content">
    <ul class="list">
    <li v-for="i in curList">{{ i }}</li>
    </ul>
    </div>
    <page :data-num="pagedata.length" :each="eachPageSize" :visiblepage="visiblepage" v-on:change-page="changePage"></page>
    </div>
     data: function(){
    return{
    cur: 0
    , dataNum: 0
    , eachPageSize: 3
    , visiblepage: 5 , pagedata: [1, 2, 3, 4, 5, 6, 7, 8, 9]
    , curpage: 1
    } }
    , computed: {
    curList: function () {
    var p = [];
    for(var i = 0,l= this.pagedata.length;i<l;i++){
    p[i] = this.pagedata[i];
    }
    return p.splice((this.curpage-1) * this.eachPageSize, this.eachPageSize);
    }
    }
    , methods: {
    changePage: function (cur) {
    this.curpage = cur
    }
    }
  6. 上面绿色的高亮主要是解决对象引用的问题,这个问题嘛要说起来可就说来话长了。。后面我也得再捋一捋这个部分。红色高亮呢就是动态显示每一页的内容。

以上呢就是所有核心代码啦,最后显示的效果就是如下:切换时候的效果你们就自己下去尝试吧~~我要下班了哈哈~代码提交给小哥,明天说不定又有新问题要给我。。先回家睡个好觉再说~大家加油~

基于vue2.0的分页组件开发的更多相关文章

  1. 饿了么基于Vue2.0的通用组件开发之路(分享会记录)

    Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...

  2. 一款基于vue2.0的分页组件---写在页面内

    通过 Vue2.0 实现的分页 可自由设置分页显示的多少.上一页.下一页.省略号等,也可直接输入跳转到的页码进行跳转,分页的样式可自由调整 // 1.页面的 head 部分,需要设计好页面的样式 .p ...

  3. vue2.0实现分页组件

    最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己 ...

  4. 基于VUE2.0的分页插件(很好用,很简单)

    基于jQuery的分页插件很多,今天分享一下基于Vue的分页插件pagination.js,该插件使用用感觉很不错,简单不复杂,现将个人使用过程中的方法与遇到的问题以及实例分享出来. 下载解压的主要目 ...

  5. 基于Vue2.0的单页面开发方案

    2016的最后一天,多多少少都应该总结一下这一年的得失,哪里做的好,哪里需要改进,记一笔,或许将来会用到呢. 毕业差不多半年了,一直是一个人在负责公司项目的前端开发与维护,当时公司希望前后端分离,提高 ...

  6. Vue2.0的通用组件

    饿了么基于Vue2.0的通用组件开发之路(分享会记录)   Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库. ...

  7. 基于vue2.0前端组件库element中 el-form表单 自定义验证填坑

    eleme写的基于vue2.0的前端组件库: http://element.eleme.io 我在平时使用过程中,遇到的问题. 自定义表单验证出坑: 1: validate/resetFields 未 ...

  8. vue-swiper 基于Vue2.0开发 轻量、高性能轮播插件

    vue-swiper 基于 Vue2.0 开发,基本满足大部分功能 轻量.高性能轮播插件.目前支持 无缝衔接自动轮播.无限轮播.手势轮播 没有引入第三方库,原生 js 封装,打包之后只有 8.2KB ...

  9. 干货分享:vue2.0做移动端开发用到的相关插件和经验总结(2)

    最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少.经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api( ...

随机推荐

  1. Zadig - USB driver installation made easy

    http://zadig.akeo.ie/

  2. idea初使用之配置使用maven仓库

    idea使用的理由已经无需多说.现在已经超过了eclipse.java开发种占有44%.第一次使用上手还是挺难的.跟用惯了myeclipse的我来说.对于project的概念深入人心.还理解不了它的M ...

  3. WCF初探-26:WCF中的会话

    理解WCF中的会话机制 在WCF应用程序中,会话将一组消息相互关联,从而形成对话.会话”是在两个终结点之间发送的所有消息的一种相互关系.当某个服务协定指定它需要会话时,该协定会指定所有调用(即,支持调 ...

  4. IO多路复用,实现多线程监听

    服务端 import socket sk1 = socket.socket() sk1.bind(('127.0.0.1',8001)) sk1.listen() sk2 = socket.socke ...

  5. Oracle查询

    1.普通查询 select * from 表格 查询所有内容 select 列名,列名 from 表格查询某几列 2.条件查询 select * from 表格 where 条件 条件查询 selec ...

  6. [深度优先搜索] POJ 3620 Avoid The Lakes

    Avoid The Lakes Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8173   Accepted: 4270 D ...

  7. Android中View的基础知识

    View的界限 View就是我们看到的界面,有四个界限范围分别是, Top/Left, Bottom/Right,坐标系从左上到右下.这四个值可以通过任何View的子类调用getTop()/get.. ...

  8. php上传文件类型

    下面提供一张IE和火狐浏览器的文件类型对照表: ie 火狐 id 后缀名 php识别出的文件类型 0 gif image/gif 1 jpg image/jpeg 2 png image/png 3 ...

  9. js正则实现二代身份证号码验证详解

    js正则实现二代身份证号码验证详解 根据[中华人民共和国国家标准 GB 11643-1999]中有关公民身份号码的规定,公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成.排列顺序从左至 ...

  10. java常用基础知识点 (持续追加)

    作为一个Java编程人,会经常用上JDK中的大量的API类库,常用的有字符串操作.集合操作.文本操作.输入输出操作.以及网络操作, 常用的包: 1. java.lang Java程序的基础类,字符串, ...