• iview中page组件的跳转功能BUG解决方案


    xl_echo编辑整理,欢迎转载,转载请声明文章来源。欢迎添加echo微信(微信号:t2421499075)交流学习。 百战不败,依不自称常胜,百败不颓,依能奋力前行。——这才是真正的堪称强大!!


    在使用iview的时候,对于界面效果确实是比较满意,提供的组件也很多的很全,和element相比,iview更注重视觉和渲染。但是也有一些缺点,比如组件的bug,生态圈的收费问题。这里只讲解page的跳转bug

    iview中page最初的跳转功能样子如下

    page

    可以看到并没有跳转的按钮,如果要跳转的话,必须输入页数之后按'enter'键,如果不按没法跳转。对于用户来说,电脑的操作水平不一,很多人可能没有enter的意识,这样就造成了这个功能的鸡肋,所以需要修复

    修复最终的界面跳过如下

    page

    跳转按钮是我们手动加上去的一个按钮

    <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值接口。

    目前没有解决的疑问

    比如我点击跳转按钮之后,跳转到了响应页面。到了相应页面之后,不改变当前需要跳转的页面值的时候,再次点击跳转按钮,是没有反应的。

  • 相关阅读:
    springboot(六):如何优雅的使用mybatis
    springboot(四):thymeleaf使用详解
    springboot(三):Spring boot中Redis的使用
    springboot(二):web综合开发
    Springboot(一):入门篇
    js判断对象的某个属性是否存在
    查看node.js全局安装的插件路径
    切片地图服务器
    element ui loading加载开启与关闭
    vue 引入 leaflet1.4.0
  • 原文地址:https://www.cnblogs.com/xlecho/p/11327381.html
Copyright © 2020-2023  润新知