iview page分页添加跳转按钮-输入页码后点击跳转

在iview里,分页组件的电梯功能输入页码后需要按回车才能跳转

这让不知道需要按回车的人摸不着头脑呀,所以呢,动动手写个跳转按钮~

效果如图:

[1]首先是div

<div>
	<Page :id="pageId" ref="myPage" style="float: left;"></Page>
	<div style="float: left;margin: 4px;line-height: 24px;">
	    <Button type="primary" size="small" @click="goElevatorPage">跳转</Button>
	</div>
</div>

注意此处,需要获取到<Page>这个DOM, 所以需要手动赋予pageId,当然也可以用ref

[2]然后是让它模拟点击

//点击跳转到输入的页码
   goElevatorPage(){
   	var evtObj;
   	var thisPage=document.getElementById(this.pageId);
    //var thisPage=this.$refs.myPage;//也可以用ref来获取page这个dom
   	var elevatorDiv=thisPage.getElementsByClassName("ivu-page-options-elevator");
    //如果thisPage这里报错了,请核对上文的获取page的DOM的语句是否获取不到
   	if(elevatorDiv && elevatorDiv.length>0){
   	    var pageInput = elevatorDiv[0].getElementsByTagName("input")[0];
       	    if (window.KeyEvent) {//firefox 浏览器下模拟事件
                evtObj = document.createEvent('KeyEvents');
                evtObj.initKeyEvent("keyup", true, true, window, true, false, false, false, 13, 0);
            } else {//chrome 浏览器下模拟事件
                evtObj = document.createEvent('UIEvents');
                evtObj.initUIEvent("keyup", true, true, window, 1);
                delete evtObj.keyCode;
                if (typeof evtObj.keyCode === "undefined") {//为了模拟keycode
                    Object.defineProperty(evtObj, "keyCode", { value: 13 });                       
                } else {
                    evtObj.key = String.fromCharCode(13);
                }
            }
            pageInput.dispatchEvent(evtObj);
   	}
   }

模拟键盘按下,参考:https://www.cnblogs.com/gisblogs/p/5821665.html