Vue学习笔记-实现一个分页组件

分页组件在web项目中是十分常见的组件，让我们用vue来实现一个简单的分页组件。

功能点：

1.点击页面序号可以跳转到相应页面。
2.点击上一页或者下一页可以跳转页面，当页面在第一页时上一页无法点击，页面在最后一页时下一页无法点击。
3.一次显示当前页面的前两页和后两页
4.当当前页面的序号和第一页与最后一页相差三个以上时出现省略号
5.始终显示第一页和最后一页，只有一页的时候显示一页

组件代码：

Pagination.vue
<!--
  params:
    pageNo: 总页数
    current: 当前的页码
 -->
<template>
  <div class="pager">
    <button class="btn btn-pager" :disabled="this.current == 1" @click="prePage">上一页</button>
    <span v-if="pageNo !== 1" class="page-index {{ 1 == current ? '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 {{ pageNo == current ? 'active':''}} " @click="goPage(pageNo)">{{pageNo}}</span>
    <button class="btn btn-pager" :disabled="this.current == pageNo" @click="nextPage">下一页</button>
  </div>
</template>

1.给页码标签绑定class，使用对象语法，让当前的页码附上'active'类名，这样可以动态的得到active的样式，使得当前页码区别于其他页码
2.给button绑定:disabled属性，让按钮在当前页面等于最后一页或者第一页时无法点击
3.goPage方法绑定在页码标签上实现点击页面索引，跳转到相应页面
4.prePage方法和nextPage方法绑定在button上实现页面跳转
5.使用v-if指令动态判断省略号和第一页是否能显示
6使用v-for指令将所有应该显示的页码遍历出来

JS部分就直接以注释来说明

<script>
export default {
  props: {
    // 用于记录总页码，可由父组件传过来
    pageNo: {
      type: Number,
      default: 1
    },
    // 用于记录当前页数，这个与父组件进行数据交互来完成每一页的数据更新，所以我们只要改变current的值来控制整个页面的数据即可
    current: {
      type: Number,
      default: 1
    }
  },
  data: function () {
    return {
      // 用于判断省略号是否显示
      backClipped: true, 
      preClipped: false
    }
  },
  methods: {
    prePage () {
      // 上一页
      this.current--
    },
    nextPage () {
      // 下一页
      this.current++
    },
    goPage (index) {
      // 跳转到相应页面
      if (index !== this.current) {
        this.current = index
      }
    }
  },
  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)) {
          当前页与最后一页差距3以上时显示省略号
          this.backClipped = true
        }
      } else {
        this.backClipped = false
        for (let i = (this.current + 1); i < this.pageNo; i++) {
          ret.push(i)
        }
      }
      // 返回整个页码组
      return ret
    }
  }
}
</script>
// 组件样式
<style scoped>
.pager {
  text-align: center;
}
.btn-pager {
  margin-left: 10px;
  padding: 0px;
  width: 60px;
  height: 30px;
  text-align: center;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #e3e3e3;
  border-radius: 0px;;
}
.btn-pager:hover {
  background-color: #f2f2f2;
}
.page-index {
  display: inline-block;
  margin-left: 10px;
  width: 35px;
  height: 30px;
  line-height: 30px;
  background-color: #ffffff;
  cursor: pointer;
  color: #000000;
}
.active {
  color: #ffffff;
  background-color: #0bbe06;
}
</style>

配合父组件使用

<pagination :page-no="pageNo" :current.sync="currentPage"></pagination>
// 从父组件使用该分页组件的地方传递总页码pageNo
// 父组件与该分页组件双向绑定current
// 使用currentPage 来更新页面需要的数据
  watch: {
    currentPage: 'requestData'
  },
  ready () {
    this.requestData()
  },
  data () {
    return {
      currentPage: 1
    }
  },
  methods: {
    requestData () {
      // 在这里使用ajax或者fetch将对应页传过去获取数据即可
    }
  }

完成后的效果图：

分页组件 分页组件