<template>
    <div class="pagination">
      <el-pagination
        background
        :hide-on-single-page="true"
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "MyPagination",
      props:{
        pagerCount:{
          type:Number,
          default:6
        },
        //  限制 每页 多少条
        limit:{
          type:Number,
          default:10
        },
        // 页数
        page:{
          type:Number,
          default:1
        },
        // 总 数
        total:{
          type:Number,
          default:100
        }
      },
      computed:{
        isCurrent:{
          get(){
            return this.page
          },
          set(val){
            return this.$emit('update:current',val)
          }
        },
      },
      methods:{
        handleClick(item){
          this.$emit('update:current',item)
        },
        handleCurrentChange(val) {
          this.$emit('change',val)
        },
        myCallback(VAL){
        }
      }
    }
</script>

<style scoped  lang="less">
.pagination{
  display: flex;
  justify-content: center;
  align-items: center;
  &-lists{
    display: flex;
    align-items: center;
  }
  &-prev{
    margin-right: .1rem;
  }
  &-next{
    margin-left: .1rem;
    .svg-icon{
      transform: rotate(180deg);
    }
  }
  &-prev,&-next,&-list{
    width: .48rem;
    height: .48rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    &:active,&:hover{
      background: #F3F3F3;
      border-radius: .05rem;
    }
  }
  &-list{
    margin-right: .08rem;
    &:last-child{
      margin-right: 0;
    }
    &.active{
      background: #F3F3F3;
      border-radius: .05rem;
    }
  }
}
</style>
