Vue如何實現(xiàn)iframe的上一步、下一步操作
更新時間：2022年06月01日 14:36:08 作者：Houwe1
這篇文章主要介紹了Vue如何實現(xiàn)iframe的上一步、下一步操作，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
iframe的上一步、下一步操作
背景
使用Element的Tabs組件嵌入多頁面，但是頁面中需要實現(xiàn)上一步、下一步功能，如圖：
實現(xiàn)
//父組件
?? ??? ?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拼接的時候直接調(diào)用函數(shù)獲取參數(shù)
BUG
每次頁面一動就會重新獲取加載一次iframe，導致頁面晃動
解決方案
把方法值賦值給變量，在src拼接中直接使用變量，而不是直接使用函數(shù)獲取
心得
動態(tài)加載的數(shù)據(jù)，一般賦值給變量，而不要直接調(diào)取方法獲取
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue element 中的table動態(tài)渲染實現(xiàn)（動態(tài)表頭）
這篇文章主要介紹了vue element 中的table動態(tài)渲染實現(xiàn)（動態(tài)表頭），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
這篇文章主要介紹了vue3 添加編輯頁使用 cron 表達式生成方法小結,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了解決Vue router-link綁定事件不生效的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要為大家介紹了vue原生input輸入框原理剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
詳解VS Code使用之Vue工程配置format代碼格式化
這篇文章主要介紹了詳解VS Code使用之Vue工程配置format代碼格式化，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要介紹了VUE 數(shù)組更新問題，文中給大家介紹了vue如何監(jiān)聽數(shù)據(jù)的變化的 ,需要的朋友可以參考下2017-12-12
這一篇主要是創(chuàng)建一個vue項目并結合餓了么框架element-ui的文章。文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
單文件就是把一個頁面拆分為多個,多層次的組件,通過多層引用,大大縮小vue文件的長度和頁面復雜度,下面這篇文章主要給大家介紹了關于vue3單文件組件中style特性的相關資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了Vue中引入樣式文件的方法,需要的朋友可以參考下2017-08-08
這篇文章主要給大家介紹了關于vue將某個組件打包成js并在其他項目使用的相關資料,文中通過示例代碼介紹的非常詳細,對大家具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07