<template>
  <div class="kole-pagination kole-pagination-pager" aria-label="分页"><button class="kole-pagination-page" type="button" @click="change(Math.max(1, page - 1))">上一页</button><button class="kole-pagination-page is-current" type="button">{{ page }}</button><button class="kole-pagination-page" type="button" @click="change(page + 1)">下一页</button><span class="kole-pagination-desc">共 {{ total }} 条 · 每页 {{ pageSize }} 条</span></div>
</template>

<script>
export default {
  name: 'KolePagination',
  props: {
    total: { type: Number, default: 128 }, // 总数
    page: { type: Number, default: 1 }, // 当前页码
    pageSize: { type: Number, default: 10 }, // 每页条数
    size: { type: String, default: 'default' }, // 尺寸
  },
  methods: {
    change: function (value) { this.$emit('input', value); this.$emit('change', value); this.$emit('pagechange', value); }
  },
  // events: pagechange, sizechange
};
</script>

<style src="./Pagination.css"></style>
