广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue如何实现iframe的上一步、下一步操作
  • 531
分享到

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

2024-04-02 19:04:59 531人浏览 安东尼
摘要

目录iframe的上一步、下一步操作背景实现Vue使用iframe踩坑需求BUG解决方案心得iframe的上一步、下一步操作 背景 使用Element的Tabs组件嵌入多页面,但是页

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

心得

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: Vue如何实现iframe的上一步、下一步操作

本文链接: https://www.lsjlt.com/news/150367.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作