分页组件——vue

项目开发中，经常会遇到分页功能，也会经常涉及组件化开发和组件复用，下列用vue对分页组件进行了简单封装，具体代码如下：

源代码：

（1）app.vue代码段：

<template>
  <div id="app">
    <v-pagination :cur.sync="cur" :all.sync="all" @listen="monitor"></v-pagination>
    <p>{{msg}}</p>
  </div>
</template>

<script>
import pagination from "./components/pagination.vue";
export default {
  name: "app",
  data () {
    return{
      // 当前页码
      cur: 1,
      // 总页数
      all: 100,
      msg: ""
    };
  },
  components: {
    // 引用组件
    "v-pagination": pagination
  },
  created() {
      this.msg = "当前页为：" + this.cur;
  },
  methods: {
    monitor: function (data) {
    // 翻页事件
      this.msg = "当前页为：" +  data;
    }
  }
};
</script>

<style lang="scss"></style>

（2）pagination.vue代码片段：

<template>
  <div class="page-bar"> 
    <ul> 
      <li><a :class="setButtonClass(0)" v-on:click="prvePage(curIndex)">上一页</a></li> 
      <li v-for="index in indexs"  v-bind:class="{ active: curIndex == index }"> 
        <a v-on:click="btnClick(index)">{{ index < 1 ? "..." : index }}</a> 
      </li> 
      <li><a :class="setButtonClass(1)" v-on:click="nextPage(curIndex)">下一页</a></li> 
    </ul>
  </div>
</template>

<script> 
  export default {
     props: ["cur", "all"],
     data() {
      return{
        curIndex: 1
      };
     },
     computed: {
      indexs: function () {
        var left = 1;
        var right = this.all;
        var ar = [];
        if (this.all >= 11) {
          if (this.curIndex > 5 && this.curIndex < this.all - 4) {
            left = this.curIndex - 5;
            right = this.curIndex + 4;
          } else {
            if (this.curIndex <= 5) {
              left = 1;
              right = 10;
            } else {
              right = this.all;
              left = this.all - 9;
            }
          }
        }
        while (left <= right) {
          ar.push(left);
          left++;
        }
        if (ar[0] > 1) {
          ar[0] = 1;
          ar[1] = -1;
        }
        if (ar[ar.length - 1] < this.all) {
          ar[ar.length - 1] = this.all;
          ar[ar.length - 2] = 0;
        }
        return ar;
      }
    },
    methods: {
    // 页码点击事件
      btnClick: function (data) {
        if (data < 1) return;
        if (data != this.curIndex) {  
          this.curIndex = data;
          this.$emit("listen", data);
          console.log(data);
        }
      },
      // 下一页
      nextPage: function (data) {
        if (this.curIndex >= this.all) return;
        this.btnClick(this.curIndex + 1);
      },
      // 上一页
      prvePage: function (data) {
        if (this.curIndex <= 1) return;
        this.btnClick(this.curIndex - 1);
      },
      // 设置按钮禁用样式
      setButtonClass: function (isNextButton) {
        if (isNextButton) {
          return this.curIndex >= this.all ? "page-button-disabled" : "";
        }
        else {
          return this.curIndex <= 1 ? "page-button-disabled" : "";
        }
      }
    }
  }
</script>

<style lang="scss">
   @import "../style/pagination.css";
</style>

（3）pagination.css代码片段：

ul, li {margin: 0px;padding: 0px;}
.page-bar {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.page-button-disabled {
    color:#ddd !important;
}
.page-bar li {
    list-style: none;
    display: inline-block;
}
.page-bar li:first-child > a {
    margin-left: 0px;
}
.page-bar a {
    border: 1px solid #ddd;
    text-decoration: none;
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    cursor: pointer;
}

.page-bar a:hover {
    background-color: #eee;
}

.page-bar .active a {
    color: #fff;
    cursor: default;
    background-color: #337ab7;
    border-color: #337ab7;
}

.page-bar i {
    font-style: normal;
    color: #d44950;
    margin: 0px 4px;
    font-size: 12px;
}

（4）main.js代码片段：

import Vue from "vue"
import App from "./App.vue"

new Vue({
  el: "#app",
  render: h => h(App)
})

（5）效果图：