mall-web-ssr/components/common/page/pageComponent.vue

<template>
  <div style="float: right; margin: 30px 0;">
    <el-pagination
      :current-page.sync="current"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="total"
      @current-change="handleCurrentChange"
      v-if="total/pageSize>=1">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    props: ['current', 'total', 'pageSize'],
    methods: {
      handleCurrentChange: function (changedPage) {
        this.$emit('childEvent', changedPage)
      }
    }
  }
</script>

<style>
  a {
    color: #2d8cf0;
    background: 0 0;
    text-decoration: none;
    outline: 0;
    cursor: pointer;
    transition: color .2s ease;
  }
  .el-pagination .btn-next, .el-pagination .btn-prev {
    color: #337ab7;
  }
  .el-pager li{
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
    font-size: 10px;
  }
  .el-pager li:not(.active):hover, .el-pagination button:hover {
    z-index: 3;
    color: #23527c;
    background-color: #eee;
    border-color: #ddd;
  }
  .el-pager li.active {
    background: #5078cb!important;
  }
  .el-icon-arrow-left:before {
    content: "\f100";
    font-family: FontAwesome;
  }
  .el-icon-arrow-right:before {
    content: "\f101";
    font-family: FontAwesome;
  }
  .el-pagination button.disabled {
    color: #337ab7;
    background-color: #fff;
    cursor: not-allowed;
  }
</style>