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脚手架学习之项目创建方式的相关资料，文中通过介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要为大家详细介绍了vue实现倒计时功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
这篇文章主要介绍了vue实现禁止浏览器记住密码功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-02-02
解决element-ui table设置列fixed时X轴滚动条无法拖动问题
这篇文章主要介绍了解决element-ui table设置列fixed时X轴滚动条无法拖动问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue3 toRef函数和toRefs函数,文中介绍了ref和toRef的区别，ref本质是拷贝，修改响应式数据不会影响原始数据，toRef的本质是引用关系，修改响应式数据会影响原始数据，需要的朋友可以参考下2022-11-11
本篇文章主要介绍了VUE开发一个图片轮播的组件示例代码，对图片轮播效果感兴趣的小伙伴们可以参考一下。2017-03-03
这篇文章主要介绍了vue.js el-table动态单元格列合并方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
vue+element搭建后台小总结 el-dropdown下拉功能
这篇文章主要为大家详细介绍了vue+element搭建后台小总结，el-dropdown下拉功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了Vue3封装 Message消息提示实例函数,具有一定的实用价值,需要的朋友可以参考下，希望能够给你带来帮助2021-09-09
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章主要给大家介绍了关于Vue新手指南之创建第一个vue-cli程序的相关资料,需要的朋友可以参考下2021-05-05
最新评论