Vue如何實(shí)現(xiàn)iframe的上一步、下一步操作
更新時(shí)間：2022年06月01日 14:36:08 作者：Houwe1
這篇文章主要介紹了Vue如何實(shí)現(xiàn)iframe的上一步、下一步操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
iframe的上一步、下一步操作
背景
使用Element的Tabs組件嵌入多頁(yè)面，但是頁(yè)面中需要實(shí)現(xiàn)上一步、下一步功能，如圖：
實(shí)現(xiàn)
//父組件
?? ??? ?var vm = new Vue({
?? ??? ? ? ? el: "#app",
?? ??? ? ? ? data: {
?? ??? ? ? ? ? ? pages: [],
?? ??? ? ? ? ? ? index: 0,
?? ??? ? ? ? ? ? bmbiId: 0
?? ??? ? ? ? },
?? ??? ? ? ? methods: {
?? ??? ? ? ? ? ? goPageIndex(pageIndex) {
?? ??? ? ? ? ? ? ? ? this.index = pageIndex;
?? ??? ? ? ? ? ? }
?? ??? ? ? ? },
?? ??? ? ? ? ...
?? ??? ? ? });
?? ??? ?//在Vue實(shí)例外聲明方法
?? ??? ?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踩坑
需求
通過(guò)iframe寫(xiě)epub閱讀器
由于src需要加密，所以在src拼接的時(shí)候直接調(diào)用函數(shù)獲取參數(shù)
BUG
每次頁(yè)面一動(dòng)就會(huì)重新獲取加載一次iframe，導(dǎo)致頁(yè)面晃動(dòng)
解決方案
把方法值賦值給變量，在src拼接中直接使用變量，而不是直接使用函數(shù)獲取
心得
動(dòng)態(tài)加載的數(shù)據(jù)，一般賦值給變量，而不要直接調(diào)取方法獲取
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+echart?展示后端獲取的數(shù)據(jù)實(shí)現(xiàn)
本文主要介紹了Vue+echart?展示后端獲取的數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了vue如何自定義按鈕單選和多選問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue中使用js-doc的相關(guān)知識(shí)，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2024-01-01
有些時(shí)候客戶希望產(chǎn)品使用他們公司要求的字體,這個(gè)時(shí)候我們需要將客戶提供的字體文件引入到項(xiàng)目中,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目導(dǎo)入字體文件的方法步驟,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue使用Font Awesome的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
解決Element ui導(dǎo)航欄選中背景色刷新消失的問(wèn)題
這篇文章主要介紹了解決Element ui導(dǎo)航欄選中背景色刷新消失的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue loadmore 組件滑動(dòng)加載更多源碼解析
這篇文章主要介紹了vue loadmore 組件滑動(dòng)加載更多源碼解析,需要的朋友可以參考下2017-07-07
Vue中對(duì)＜style scoped＞ 中的scoped屬性解析
在Vue的單文件組件中,<style scoped> 的 scoped 屬性用于實(shí)現(xiàn)?樣式作用域隔離?,下面通過(guò)實(shí)例代碼講解Vue中對(duì)＜style scoped＞中的scoped屬性,感興趣的朋友一起看看吧2025-03-03
vue用elementui寫(xiě)form表單時(shí),在label里添加空格操作
這篇文章主要介紹了vue用elementui寫(xiě)form表單時(shí),在label里添加空格操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要介紹了淺談Vue SSR中的Bundle的具有使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11