vue分页组件

组件源码：

<template>
  <div style="display: flex;flex-direction: row;align-items: center;margin: 20px 0;">
    <div class="pages-item" v-if="isShowTotal">共有{{totalPage}}页</div>
    <div @click="firstPage" class="pages-item" style="cursor:pointer;">首页</div>
    <div @click="changePage(currentPage-1)" class="pages-item" style="cursor:pointer;">上一页</div>
    <div style="display: flex;flex-direction: row;">
      <div :class="currentPage==item.val?'pages-item3':'pages-item2'" style="cursor:pointer;" v-for="item in pagelist" v-text="item.text"
        @click="changePage(item.val)">1</div>
    </div>
    <div @click="changePage(currentPage+1)" class="pages-item" style="cursor:pointer;">下一页</div>
    <div @click="lastPage" class="pages-item" style="cursor:pointer;">尾页</div>
  </div>
</template>

<script>
  export default {
    name: 'Paging',
    props: {
      name: String,
      pageSize: {
        type: Number,
        default: 10
      },
      total: {
        type: Number,
        default: 0
      },
      currentPage: {
        type: Number,
        default: 1
      },
      layout: {
        type: String
      }
    },
    data() {
      return {
        isShowJumper: false,
        isShowTotal: false,
        toPage: '', //跳转到x页
        pageGroup: 10 //可见分页数量 默认10个分页数
      }
    },
    created: function() {
      this.isShowTotal = this.layout.indexOf('total') !== -1;
      this.isShowJumper = this.layout.indexOf('jumper') !== -1;
    },
    mounted: function() {
    },
    computed: {
      totalPage: function() {
        return Math.ceil(this.total / this.pageSize)
      },
      pagelist: function() {
        var list = [];
        var count = Math.floor(this.pageGroup / 2),
          center = this.currentPage;
        var left = 1,
          right = this.totalPage;

        if (this.totalPage > this.pageGroup) {
          if (this.currentPage > count + 1) {
            if (this.currentPage < this.totalPage - count) {
              left = this.currentPage - count;
              right = this.currentPage + count - 1;
            } else {
              left = this.totalPage - this.pageGroup + 1;
            }
          } else {
            right = this.pageGroup;
          }
        }

        // 遍历添加到数组里
        while (left <= right) {
          list.push({
            text: left,
            val: left
          });
          left++;
        }
        return list;
      }
    },
    methods: {
      firstPage() {
        this.$emit('change', {
          curPage: Number(1)
        });
      },
      lastPage() {
        this.$emit('change', {
          curPage: Number(this.totalPage)
        });
      },
      // 回车事件
      // submit(toPage,e){
      // 	// console.log('e.keyCode',toPage,e.keyCode)
      //      // key.Code === 13表示回车键
      //      if(e.keyCode === 13){
      //          //逻辑处理
      //          this.changePage(toPage);
      //      }
      //  },
      changePage: function(idx) {
        if (idx != this.currentPage && idx > 0 && idx <= this.totalPage) {
          // 触发父组件事件  pageChange会转换成小写pagechange
          this.$emit('change', {
            curPage: Number(idx)
          });
        }
      },

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .pages-item {
    width: 75px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border: 1px solid #DFDCD8;
    margin: 0 5px;
    font-size: 14px;
    color: #000000;
  }

  .pages-item2 {
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border: 1px solid #DFDCD8;
    margin: 0 5px;
    font-size: 14px;
    color: #000000;
  }

  .pages-item3 {
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    /* border: 1px solid #DFDCD8; */
    background-color: #4ECAD1;
    margin: 0 5px;
    font-size: 14px;
    color: #FFFFFF;
  }

  * {
    padding: 0;
    margin: 0;
  }

  .fl {
    float: left;
  }

  .clearfix:after {
    display: block;
    content: '';
    clear: both;
  }

  .page-size {
    height: 26px;
    line-height: 26px;
  }

  .page-list {}

  .page-jump {
    height: 26px;
    line-height: 26px;
    margin-left: 20px;
  }

  .page-jump .input {
    width: 32px;
    padding: 4px 2px;
    border-radius: 2px;
    border: 1px solid #dcdfe6;
    margin: 0 4px;
  }

  ul {
    list-style: none;
  }

  ul li {
    float: left;
    color: #606266;
    background: #f4f4f5;
    padding: 2px 8px;
    cursor: pointer;
    border-radius: 2px;
    margin: 0 5px;
  }

  ul>li.active {
    background: #409eff;
    color: #fff;
  }
</style>

组件使用：

<Paging
            :name="name"
            @change="onPageChange"
            :page-size="size"
            :total="total"
            layout="jumper,total"
            :current-page="curPage"
          />
    =========
 	import Paging from '@/components/Paging';
 	========
  	components: { Paging },
	data () {
	      return {
	        msg: 'hello',
	        name:'阿健a',
	        size:10,
	        total:0,
	        curPage:1
	      }
	    },