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拼接中直接使用变量，而不是直接使用函数获取
心得
动态加载的数据，一般赋值给变量，而不要直接调取方法获取
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
VueQuillEditor富文本上传图片(非base64)
这篇文章主要介绍了VueQuillEditor富文本上传图片(非base64),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
Vue3中defineEmits、defineProps 不用引入便直接用
这篇文章主要介绍了Vue3中defineEmits、defineProps 不用引入便直接用，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
本文主要介绍了vue3+ts+vant移动端H5项目搭建，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章较详细的给大家介绍了vue组件之间传值的方法，在 Vue 中，可以使用props向子组件传递数据。具体传递方法大家跟随脚本之家小编一起看看吧2018-08-08
props属性是父子组件之间的通信桥梁。这篇文章主要介绍了Vue中props的使用,需要的朋友可以参考下2018-06-06
这篇文章主要介绍了Vue引入sass并配置全局变量的方法2018-06-06
这篇文章主要为大家介绍了vue3使用Facebook嵌入式视频播放器API方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
本文是作者通过实际项目的优化实践进行总结而来，希望读者读完本文，有一定的启发思考，从而对自己的项目进行优化起到帮助2022-08-08
这篇文章主要介绍了vue3的自定义hook函数使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
前端的国际化是一个比较常见的需求,但网上关于这一方面的直接可用的方案却不多,这篇文章主要给大家介绍了关于Vue.js项目前端多语言方案的思路与实践,需要的朋友可以参考下2021-07-07
最新评论