<template>
  <el-pagination :layout="layout" @current-change="refreshPageRequest"
                 :current-page="currentPage" :page-size="pageSize" :total="total">
  </el-pagination>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {}
        },
        props: {
            layout:{
                type:String,
                default:'prev, pager, next'
            },
            currentPage:{
                type:Number,
                default: 1
            },
            pageSize:{
                type:Number,
                default: 1
            },
            total:{
                type:Number,
                default: 1
            }
        },
        methods: {
            refreshPageRequest(v){
                this.$emit('current-change',v)
            }
        },
    }
</script>

<style scoped lang="scss">
  /deep/ .el-pager li{
    min-width: 25.5px;
    padding: 0;
  }
  .el-pagination{
    padding-left: 0;
  }
  /deep/{
    button, span:not([class*=suffix]){
      min-width: 25.5px;
    }
    .btn-next{
      padding-left: 0;
      padding-right: 0;
      .el-icon{
        display: inline-block;
      }
    }
    .btn-prev{
      padding-left: 0;
      padding-right: 0;
      .el-icon{
        display: inline-block;
      }
    }
  }
</style>
