<template>
  <div>
    <p>页数较少时的效果</p>
    <h-npagination :value="pageData1" @change="fnSearchTable" @sizeChange="fnSearchTableSize"></h-npagination>
    <p>页数较多时的效果</p>
    <h-npagination :value="pageData2"></h-npagination>
  </div>
</template>
<script setup>
import {
  ref
} from 'vue';
const pageData1 = ref({
  page: 1,
  size: 10,
  total: 50
})
const pageData2 = ref({
  page: 1,
  size: 10,
  total: 100
})
const fnSearchTable = (num) => {
  if (num && !isNaN(num)) {
    pageData1.value.page = num;
  }
}
const fnSearchTableSize = (num) => {
  pageData1.value.size = num;
  fnSearchTable(1)
};
</script>