iview中page组件的跳转功能BUG解决方案
程序员文章站
2024-02-05 15:08:22
xl_echo编辑整理,欢迎转载,转载请声明文章来源。欢迎添加echo微信(微信号:t2421499075)交流学习。 百战不败,依不自称常胜,百败不颓,依能奋力前行。——这才是真正的堪称强大!! 在使用iview的时候,对于界面效果确实是比较满意,提供的组件也很多的很全,和element相比,iv ......
xl_echo编辑整理,欢迎转载,转载请声明文章来源。欢迎添加echo微信(微信号:t2421499075)交流学习。 百战不败,依不自称常胜,百败不颓,依能奋力前行。——这才是真正的堪称强大!!
在使用iview的时候,对于界面效果确实是比较满意,提供的组件也很多的很全,和element相比,iview更注重视觉和渲染。但是也有一些缺点,比如组件的bug,生态圈的收费问题。这里只讲解page的跳转bug
iview中page最初的跳转功能样子如下
可以看到并没有跳转的按钮,如果要跳转的话,必须输入页数之后按'enter'键,如果不按没法跳转。对于用户来说,电脑的操作水平不一,很多人可能没有enter的意识,这样就造成了这个功能的鸡肋,所以需要修复
修复最终的界面跳过如下
跳转按钮是我们手动加上去的一个按钮
<page :id="pageid" :total="total" :current="page" @on-change="changepage" @on-page-size-change="changespages" show-sizer show-elevator > </page> <div style="float: left;margin-right: 10px;margin-top: 12px"> <button type="primary" size="small" @click="goelevatorpage(pageid)">跳转</button> </div>
加上按钮之后我们并没有实现功能,只是看起来比较像而已。
模拟点击跳转
编写点击跳转方法之前要现在page组件中添加:id="pageid"
,并在return当中定义对应pageid的值。我这里定义如下:
return { pageid: "targetpage", }
完成之后,编写跳转方法,如下:
goelevatorpage:function(pageid){ var evtobj; var thispage=document.getelementbyid(pageid); var elevatordiv=thispage.getelementsbyclassname("ivu-page-options-elevator"); 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); } }
多page组件同一页面
如果在这个页面中间有很多个page组件,那么这里只能实现一个page组件的跳转,如果需要多个page组件都有这个功能,模拟跳转方法,只需要一个即可,关键是要在page组件中添加:id="pageid"
一个page对应一个不同的id值,在对应调用方法的地方传入对应id值接口。
目前没有解决的疑问
比如我点击跳转按钮之后,跳转到了响应页面。到了相应页面之后,不改变当前需要跳转的页面值的时候,再次点击跳转按钮,是没有反应的。
上一篇: linux中pip操作时的超时解决方法
下一篇: Hibernate 框架 -HQL 语法