Vue如何實現iframe的上一步、下一步操作

Posted on by

iframe的上一步、下一步操作

背景

使用Element的Tabs組件嵌入多頁面，但是頁面中需要實現上一步、下一步功能，如圖：

實現

//父組件
        var vm = new Vue({
             el: "#app",
             data: {
                 pages: [],
                 index: 0,
                 bmbiId: 0
             },
             methods: {
                 goPageIndex(pageIndex) {
                     this.index = pageIndex;
                 }
             },
             ...
           });
        //在Vue實例外聲明方法
        function goPageIndex(tab) {
            vm.goPageIndex(tab)
        }
//子組件
    <div style="text-align:center;margin:10px;">
        <el-button type="primary" @@click="handleBack" size="mini">上一步</el-button>
        <el-button type="primary" @@click="handleNext" size="mini">下一步</el-button>
    </div>
    //上一步
    handleBack() {
         window.parent.goPageIndex(1);
     },
     //下一步
     handleNext() {
          window.parent.goPageIndex(3);
      }

Vue使用iframe踩坑

需求

通過iframe寫epub閱讀器

由於src需要加密，所以在src拼接的時候直接調用函數獲取參數

BUG

每次頁面一動就會重新獲取加載一次iframe，導致頁面晃動

解決方案

把方法值賦值給變量，在src拼接中直接使用變量，而不是直接使用函數獲取

心得

動態加載的數據，一般賦值給變量，而不要直接調取方法獲取

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：