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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值