iview Page分页组件实现失去焦点跳转页码（项目笔记）

现在的iview的Page分页组件跳转页码只能输入页面后点击键盘enter键才能实现跳转，但是现在的需求是输入页码后失去焦点也能实现页码跳转。 最简单的实现方式就是使用element的分页组件，但是此项目一开始就封装iview分页组件了，不想再改成element。那么记录下实现的方式吧，防止以后忘记。。。。。。。。。。

 

简单的思路就是给iview的Page组件增加个失去焦点事件（blur）,但貌似Page组件不能直接使用blur事件，那么就只能靠js给他添加blur事件了，只要使用addEventListener给它增加个blur事件。

在使用addEventListener的过程中发现这个input并没有id，如何获取到input元素呢，在这里我直接使用setAttribute给input增加唯一id

document.getElementsByClassName('ivu-page-options-elevator')[0].children[0].setAttribute('id', 'pageInput')

接下来就是用addEventListener方法添加blur事件了，代码如下

document.getElementById('pageInput').addEventListener('blur', (res) => {
      this.changePage(Number(res.target.value))
      this.page = Number(res.target.value)
    })

由于vue的生命周期的原因，代码写在了mounted中。到目前为止已经可以实现失去焦点跳转了，但是产生了bug，如下图

产生了bug就需要解决bug，思路是对输入的页码进行判断，大于分页页码，失去焦点后使用最大页码，小于最大页码则正常使用

最终代码如下

  mounted () {
    document.getElementsByClassName('ivu-page-options-elevator')[0].children[0].setAttribute('id', 'pageInput')
    document.getElementById('pageInput').addEventListener('blur', (res) => {
      if (Number(res.target.value) > Math.ceil(this.total / this.size)) {
        this.page = Math.ceil(this.total / this.size)
        this.changePage(Math.ceil(this.total / this.size))
        res.target.value = Math.ceil(this.total / this.size)
      } else {
        this.changePage(Number(res.target.value))
        this.page = Number(res.target.value)
      }
    })
  },