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

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

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);
      }