Vue如何实现iframe的上一步、下一步操作
更新时间：2022年06月01日 14:36:08 作者：Houwe1
这篇文章主要介绍了Vue如何实现iframe的上一步、下一步操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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+echart 展示后端获取的数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了vue如何自定义按钮单选和多选问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了vue中使用js-doc的相关知识，本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2024-01-01
有些时候客户希望产品使用他们公司要求的字体,这个时候我们需要将客户提供的字体文件引入到项目中,下面这篇文章主要给大家介绍了关于Vue项目导入字体文件的方法步骤,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue使用Font Awesome的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了解决Element ui导航栏选中背景色刷新消失的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue loadmore 组件滑动加载更多源码解析,需要的朋友可以参考下2017-07-07
Vue中对＜style scoped＞ 中的scoped属性解析
在Vue的单文件组件中,<style scoped> 的 scoped 属性用于实现样式作用域隔离,下面通过实例代码讲解Vue中对＜style scoped＞中的scoped属性,感兴趣的朋友一起看看吧2025-03-03
vue用elementui写form表单时,在label里添加空格操作
这篇文章主要介绍了vue用elementui写form表单时,在label里添加空格操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了浅谈Vue SSR中的Bundle的具有使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
最新评论