vue封装分页组件并注册为全局组件

在components文件夹中新建paging.vue文件

<template>
  <div class="pagingBox">
    <div class="pagItem"
         @click="pageChange(1)">
      {{isEn?'First':'首页'}}
    </div>
    <div class="pagItem"
         @click="pageChange('pre')">
      {{isEn?'Previous':'上一页'}}
    </div>
    <div v-if="pageList[2] - 2 > 1"
         class="pagItem">...</div>
    <div class="pagItem"
         v-for="(item, index) in pageList"
         :key="index"
         :class="{ pagActive: page == item }"
         @click="pageChange(item)">{{ item }}</div>
    <div v-if="pageMax - pageList[2] > 2"
         class="pagItem">...</div>
    <div class="pagItem"
         @click="pageChange('next')">
      {{isEn?'Next':'下一页'}}
    </div>
    <div class="pagItem"
         @click="pageChange(pageMax)">
      {{isEn?'Last':'尾页'}}
    </div>
    <div class="pagTotal"
         v-show="isTotal">
      {{isEn?'Total '+total:'共 '+total+' 条'}}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 内容总数
    total: {
      type: Number,
      default: 0
    },
    // 每页数量
    limit: {
      type: Number,
      default: 10
    },
    // 当前页码
    page: {
      type: Number,
      default: 1
    },
    // 是否英文
    isEn: {
      type: Boolean,
      default: false
    },
    // 是否展示总数
    isTotal: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      pageList: [] // 页码列表
    };
  },
  computed: {
    // 最大页数
    pageMax () {
      return Math.ceil(this.total / this.limit);
    }
  },
  created () {
    this.initData();
  },
  methods: {
    // 生成pageList页码列表
    initData () {
      this.pageList = []; // 清空页码
      for (let i = 1; i <= this.pageMax; i++) {
        if (i <= 5) this.pageList.push(i);
      }
    },
    // 子组件事件回调：分页
    pageChange (pageCurrent) {
      if (pageCurrent == 'pre') {
        if (this.page > 1) {
          this.$emit('page-change', this.page - 1);
        } else {
          this.$emit('page-change', this.page);
        }
      } else if (pageCurrent == 'next') {
        if (this.page < this.pageMax) {
          this.$emit('page-change', this.page + 1);
        } else {
          this.$emit('page-change', this.page);
        }
      } else {
        this.$emit('page-change', pageCurrent);
      }
    }
  },
  watch: {
    // 监听页码变化 -> 页码列表更新
    page (val) {
      if (val <= 3) {
        this.initData();
      } else if (val === this.pageMax) {
        this.pageList = [val - 2, val - 1, val];
      } else if (val === this.pageMax - 1) {
        this.pageList = [val - 2, val - 1, val, val + 1];
      } else {
        this.pageList = [val - 2, val - 1, val, val + 1, val + 2];
      }
    },
    // 监听页码变化 -> 总数更新
    total () {
      this.initData();
    }
  }
};
</script>

<style scoped>
.pagingBox {
    margin-top: 35px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    line-height: 18px;
}
.pagItem {
    padding: 7px 11px;
    border: 1px solid #ddd;
    color: #333;
    margin-right: 10px;
    cursor: pointer;
}
.pagActive {
    background: #0b8686;
    color: #fff;
    border: 1px solid #0b8686;
}
.pagTotal {
    font-size: 15px;
    color: rgb(58, 58, 58);
    margin-right: -40px;
    margin-left: 20px;
}
</style>

在main.js中引入并注册paging组件

import paging from '../../components/paging'
Vue.component('paging', paging)

使用paging分页组件

<template>
  <div>
    <paging :total="this.paging.total"
            :limit="this.paging.limit"
            :page="this.paging.page"
            isTotal
            @page-change="pageChange"></paging>
  </div>
</template>

<script>
export default {
  data () {
    return {
      paging: {
        total: 60,
        limit: 8,
        page: 1
      }
    };
  },
  methods: {
    pageChange (page) {
      if (page == this.paging.page) {
        return;
      }
      this.paging.page = page;
    }
  }
};
</script>