<!-- 分页器 -->
<script setup>
  const props=defineProps({
    page_no:{
      type:Number,
      default:1
    },
    pageSize: {
			type:Number,
			default:10
		},
		total: {
			type:Number,
			default:0
		}
  })
  const emits = defineEmits(['handleCurrentChange','handleSizeChange'])
  // 页码改变
  const handleCurrentChange=(page)=>{
    emits('handleCurrentChange',page)
  }
  // 每页数量变化
  const handleSizeChange=(pageSize)=>{
    emits('handleSizeChange',pageSize)
  }
</script>

<template>
  <el-pagination
    layout='prev, pager, next, jumper, ->, total,sizes'
    :current-page="page_no"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange"
    :page-size="pageSize" 
    :total="total"
    v-show="total!=0"
    class="pagination"
    id="pagination"
  >
  </el-pagination>
</template>
<style lang="scss" scoped>
  .pagination{
    padding: 0 10px;
    display: flex;
    align-items: center;
    height: 32px;
    background-color: white;
  }
</style>
<style lang="scss">
  #pagination{
    *{
      font-size: 12px;
    }
    .el-pagination__rightwrapper{
      order: -1;
      justify-content: flex-start;
    }
    .el-input__wrapper{
      height: 28px;
      box-sizing: border-box;
    }
    .el-pagination__editor.el-input{
      display: flex;
      align-items: center;
    }
    .el-select .el-input{
      width: 92px;
    }
  }

</style>