vue2

一些常见的组件有下面这些属性：

<pagination
    :total="600"
    show-quick-jumper
    show-size-changer
    show-total
    @change="change"
    :current-page.sync="currentPageMore"
    :page-size.sync="currentPageSize" 
/>

其中show-quick-jumper会显示页码快速跳转，但是有时候你enter之后，并不会触发接口； 解决方案：使用@keyup.enter.native来监听；

<pagination
    @keyup.enter.native="handleQuickJump"
    show-quick-jumper
/>

    const handleQuickJump = (event: Event) => {
      const input = event.target as HTMLInputElement
      const page = parseInt(input.value)

      // 验证输入
      if (!isNaN(page) && page > 0) {
        const maxPage = Math.ceil(totalHit.value / currentPageSize.value)

        if (page > maxPage) {
          proxy.$mtd.message.warning(`最大页码为 ${maxPage}`)
          input.value = currentPage.value.toString() // 重置输入值
          return
        }

        // 同步页码并触发请求
        currentPage.value = page
        searchAccount()
      }
    }

keyup修饰符

@keyup是键盘事件，对应原生的keyup事件;

<template>
  <!-- 基础用法 -->
  <input @keyup="handleKeyUp">
  
  <!-- 带事件对象 -->
  <input @keyup="handleKeyUp($event)">
  
  <!-- 特定按键监听 -->
  <input @keyup.enter="submitForm">
</template>

<script>
export default {
  methods: {
    handleKeyUp(e) {
      console.log('按键码:', e.keyCode)
      console.log('按键值:', e.key)
    },
    submitForm() {
      // 回车键提交逻辑
    }
  }
}
</script>