在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