menduner/src/components/CtPagination/index.vue

<template>
  <div class="d-flex justify-center align-center pa-5">
    <v-pagination
      v-model="currentPage"
      :length="pageLength"
      @update:modelValue="handleCurrentChange"
      v-bind="$attrs"
      :total-visible="props.totalVisible"
      active-color="primary"
      color="primary"
      size="small"
    ></v-pagination>
    <!-- <span style="color: #666;">共{{ props.total }}条数据</span>
    <div class="search px-3">
      <v-text-field
        v-model="currentJump"
        type="number"
        hide-details
        variant="outlined"
        density="compact"
        label=""
        placeholder=""
        hide-spin-buttons
      ></v-text-field>
    </div>
    <div class="">
      <v-btn color="primary" rounded class="half-button" @click="handleCurrentJump">跳转</v-btn>
    </div> -->
  </div>
</template>

<script setup>
import { computed, watch, ref, defineEmits } from 'vue'
defineOptions({ name: 'components-ct-pagnation' })
const props = defineProps({
  total: {
    type: [String, Number],
    default: 0
  },
  page: {
    type: Number,
    default: 1
  },
  limit: {
    type: Number,
    default: 10
  },
  pageSizes: {
    type: Array,
    default: () => [5, 10, 15, 20]
  },
  layout: {
    type: String,
    default: 'total, prev, pager, next, jumper'
  },
  autoScroll: {
    type: Boolean,
    default: true
  },
  hidden: {
    type: Boolean,
    default: false
  },
  totalVisible: {
    type: Number,
    default: 7
  }
})
const emit = defineEmits(['handleChange'])

const currentPage = ref(1)
// const currentJump = ref(null)
currentPage.value = props.page

watch(() => props.page, (newVal) => {
  currentPage.value = newVal
})
const pageLength = computed(() => {
  return Math.ceil(props.total / props.limit)
})

const handleCurrentChange = () => {
  emit('handleChange', currentPage.value)
}
// const handleCurrentJump = () => {
//   if (currentJump.value > pageLength.value) currentJump.value = pageLength.value
//   if (currentJump.value < 1) currentJump.value = 1
//   currentPage.value = +currentJump.value
//   emit('handleChange', currentPage.value)
// }
</script>

<style lang="scss" scoped>
.search {
width: 80px;
height: 50px;
display: flex;
align-items: center;
}
</style>