iview中page組件的跳轉功能BUG解決方案

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

目前沒有解決的疑問

好比我點擊跳轉按鈕以後，跳轉到了響應頁面。到了相應頁面以後，不改變當前須要跳轉的頁面值的時候，再次點擊跳轉按鈕，是沒有反應的。