Vue如何实现iframe的上一步、下一步操作

这篇文章主要介绍了Vue如何实现iframe的上一步、下一步操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

目录

• iframe的上一步、下一步操作
• 背景
• 实现
• Vue使用iframe踩坑
• 需求
• BUG
• 解决方案
• 心得

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拼接中直接使用变量，而不是直接使用函数获取

心得

动态加载的数据，一般赋值给变量，而不要直接调取方法获取

以上为个人经验，希望能给大家一个参考，也希望大家多多支持北冥有鱼。

您可能感兴趣的文章:

• vue中如何通过iframe方式加载本地的vue页面
• vue中使用iframe嵌入网页,页面可自适应问题
• vue中iframe的使用及说明
• vue中iframe使用以及结合postMessage实现跨域通信
• vue组件和iframe页面的相互传参问题及解决
• vue与iframe之间的交互方式(一看就会)