el-pagination jumper直跳输入框怎么去掉离焦默认事件？

Question

离焦可以跳转，没问题：

回车跳转也没问题：

但是，输入完不离焦，直接点【搜索】摁扭

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解决方案

你遇到的问题是 el-pagination 的 jumper 组件的默认行为是，当输入框失焦时，会自动跳转到输入的页码。为了解决这个问题，可以使用 @input 事件来阻止默认行为。

以下是一个示例代码：

<el-pagination
  :page-size="10"
  :total="100"
  :current-page.sync="currentPage"
  @input="handleInput"
>
  <template #jumper>
    <el-input v-model="currentPage" @input="handleInput" />
  </template>
</el-pagination>

<script>
export default {
  data() {
    return {
      currentPage: 1
    }
  },
  methods: {
    handleInput(value) {
      // 在这里你可以处理输入框的值
      // 如果你想阻止默认行为，可以return false
      return false
    }
  }
}
</script>

在上面的代码中，我们使用 @input 事件来监听输入框的输入事件，并在 handleInput 方法中阻止默认行为。这样，当输入框失焦时，页面不会自动跳转到输入的页码。

说明

如果你想在输入框失焦时仍然可以跳转到输入的页码，可以在 handleInput 方法中判断是否是失焦事件，如果是，可以return true继续执行默认行为。