VUE分页组件详解

//作者使用的是vue2.0代码，所以兼容部分大家要注意以下，
//比较忙，直接上代码，
//以下是子组件部分。可以定义为pagination.vue

//布局部分

<template>
  <div class="pager" v-show="pageNo == 1 ? false : true">
    <button class="btn btn-pager" :disabled="current == 1" @click="prePage"><img :src="current == 1 ? perForbid : per" alt=""></button>
    <span v-if="pageNo !== 1" :class="'page-index ' + (current == currentNo ? 'active' : '') " @click="goPage(1)">1</span>
    <span v-if="preClipped" class="page-index ">...</span>
    <span v-for="index in pages" :class="'page-index ' + (index == current ? 'active':'')" @click="goPage(index)">{{index}}</span>
    <span v-if="backClipped" class="page-index ">...</span>
    <span :class="'page-index ' + (current == pageNo ? 'active' : '')" @click="goPage(pageNo)">{{pageNo}}</span>
    <button class="btn btn-pager" :disabled="current == pageNo" @click="nextPage"><img :src="current == pageNo ? nextForbid : next" alt=""></button>
  </div>
</template>

//script 部分

<script>
//引入的是我这边设置的图片，可以用其他图片替换
  import Per from '../../assets/img/Per.png'
  import PerForbid from '../../assets/img/PerForbid.png'
  import Next from '../../assets/img/Next .png'
  import NextForbid from '../../assets/img/NextForbid.png'
export default {
  props: {
    // 用于记录总页码，可由父组件传过来
    pageNo: {
      type: Number,
      default: 1
    },
    // 用于记录当前页数，这个与父组件进行数据交互来完成每一页的数据更新，所以我们只要改变current的值来控制整个页面的数据即可
    currentNo: {
      type: Number,
      default: 1
    }
  },
  data: function () {
    return {
      // 用于判断省略号是否显示
      backClipped: true, 
      preClipped: false,
      current:this.currentNo,
      per:Per,
      perForbid:PerForbid,
      next:Next,
      nextForbid:NextForbid,
    }
  },
  methods: {
    prePage () {
        // 上一页
        this.current--
        this.$emit('pagination',this.current);
    },
    nextPage () {
        // 下一页
        this.current++;
        this.$emit('pagination',this.current);
    },
    goPage (index) {
        // 跳转到相应页面
        if (index !== this.current) {
            this.current = index
            this.$emit('pagination',this.current); //子组件值传递   父组件使用  this.current
        }
    }
  },
  created(){},
  computed: {
    // 使用计算属性来得到每次应该显示的页码
    pages: function () {   
      let ret = []
      if (this.current > 3) {
        // 当前页码大于三时，显示当前页码的前2个
        ret.push(this.current - 2)
        ret.push(this.current - 1)
        if (this.current > 4) {
          // 当前页与第一页差距4以上时显示省略号
          this.preClipped = true
        }
      } else {
        this.preClipped = false
        for (let i = 2; i < this.current; i++) {
          ret.push(i)
        }
      }
      if (this.current !== this.pageNo && this.current !== 1) {
        ret.push(this.current)
      }
      if (this.current < (this.pageNo - 2)) {
        // 显示当前页码的后2个
        ret.push(this.current + 1)
        ret.push(this.current + 2)
        if (this.current < (this.pageNo - 3)) {
          this.backClipped = true
        }
      } else {
        this.backClipped = false
        for (let i = (this.current + 1); i < this.pageNo; i++) {
          ret.push(i)
        }
      }
      // 返回整个页码组
      return ret
    }
  }
}
</script>

//css部分 不过多说，这个可以自己改

<style scoped>
    .pager {
        text-align: center;
    }
    .btn-pager {
        margin-left: 10px;
        padding: 0px;
        width: 24px;
        height: 24px;
        text-align: center;
        background-color: #ffffff;
        color: #ffffff;
        border: none;
        border-radius: 0px;
        overflow: hidden;
        vertical-align: middle;
        outline: none;
        cursor: pointer;
    }
    .btn-pager img{
        width: 100%;height: 100%;
    }
   .page-index {
        display: inline-block;
        margin-left: 10px;
        width: 24px;
        height: 24px;
        line-height: 24px;
        background-color: #ffffff;
        cursor: pointer;
        font-size: 14px;        
        color: #000000;
        vertical-align: middle;
    }
    .active {
        background: #7C77E2;
        border-radius: 4px;
        color: #fff;
    }
</style>

//父组件使用 template 布局部分

        <pagination 
            :page-no="pageNo"     //当前分页总数
            :current-no.sync="currentPage"  //当前页码
            @pagination="paginationClick"  //响应点击事件函数
        ></pagination>

//父组件事件

    paginationClick(current){   //响应点击后子组件当前页码
        console.log(current);
    }

//这里需要注意的是这里并没有初始化的部分，你需要在你的date值中初始化。
以下是现在组件的样式~

image.png

最后分页组件这个东东是根据简书博主的改造出来的，现在把链接贴出来拜一拜。
http://www.jianshu.com/p/d17d8e35deda