發(fā)現(xiàn)網(wǎng)絡(luò)上使用element-ui+vue做后臺(tái)頁(yè)面，基本要搭建vue腳手架，最近有個(gè)需求，就是使用element-ui+vue做一套靜態(tài)頁(yè)面，主區(qū)域使用firame，點(diǎn)擊主菜單，可以進(jìn)入子頁(yè)面。
問(wèn)題出現(xiàn)了，新增、修改、刪除的彈窗，只能在iframe區(qū)域顯示：
如何解決這個(gè)問(wèn)題呢？果斷各種查資料，希望CV大法可以解決，不過(guò)所有的解決方案都是在vue腳手架里面搭建項(xiàng)目，這又不符合目前的需求。
于是開(kāi)始思考：
1.既然列表頁(yè)可以使用iframe，那新增和修改是不是也可以使用iframe去解決？
2.如果彈窗使用iframe，那怎么才能讓子頁(yè)面喚醒父頁(yè)面的彈窗呢？
3.每個(gè)子頁(yè)面的數(shù)據(jù)不同，那么彈窗的大小也有不同，能否讓每個(gè)頁(yè)面喚起的彈窗大小可以不同呢（事實(shí)證明是可行的，在子頁(yè)面將彈窗寬高傳過(guò)去就可以了）？
想到這里，就開(kāi)始行動(dòng)！
主頁(yè)面彈窗標(biāo)簽：
<!--dislogName：彈窗名稱，可以從子頁(yè)面?zhèn)魅耄热纭靶略霾块T”-->
<!--dialogVisible：彈窗狀態(tài)，子頁(yè)面調(diào)用父頁(yè)面方法的時(shí)候，進(jìn)行喚醒-->
<!--:width=big：彈窗寬度，單位百分比，子頁(yè)面直接傳參-->
<el-dialog :title=dislogName :visible.sync="dialogVisible" :width=big :before-close="handleClose">
<!--:height=height：彈窗高度，單位像素，子頁(yè)面直接傳參-->
<iframe :src="dialogUrl" width=100% :height=height frameborder="0" id="iframeUpdate">
</iframe>
</el-dialog>主頁(yè)面vue數(shù)據(jù)及方法（注釋寫的十分清楚了）
<script>
//這里務(wù)必要有個(gè)名字，將來(lái)子頁(yè)面調(diào)方法需要使用
var index = new Vue({
el: '#app',
//數(shù)據(jù)部分
data(){
return{
// 新增修改公用彈窗狀態(tài)
dialogVisible: false,
//新增修改公用彈窗地址
dialogUrl: ' ',
//新增修改公用彈窗名稱
dislogName: '',
//新增修改公共彈窗大小，big-寬，height-高
big: '',
height: '',
}
},
methods{
//打開(kāi)新增修改公共彈窗的方法（在子頁(yè)面中調(diào)用）
dialog(url, name, big, height) {
//定義iframe標(biāo)簽位置
this.dialogUrl = url
//定義彈窗名字
this.dislogName = name
//定義彈窗寬度
this.big = big
//定義彈窗高度
this.height = height
//打開(kāi)彈窗
this.dialogVisible = true
},
}
})
</script>接下來(lái)是子頁(yè)面，從列表頁(yè)面的按鈕綁定方法，直接調(diào)用父頁(yè)面打開(kāi)彈窗的方法:
- 這里新增和修改頁(yè)面使用了同一個(gè)，新增傳入module為add，修改的話直接傳入id
- 有一個(gè)問(wèn)題需要注意，修改頁(yè)面每次需要強(qiáng)行刷新一次，否則回顯數(shù)據(jù)會(huì)出問(wèn)題，總是帶著上次回顯的數(shù)據(jù)提交
- 直接使用parent.index.dialog調(diào)用函數(shù)傳參即可
<script>
new Vue({
el:"#xxx",
methods{
//打開(kāi)新增修改彈窗的方法
addDislog(module) {
if (module === "add") {
//參數(shù)1：彈窗內(nèi)引用的iframe地址
//參數(shù)2：彈窗名字
//參數(shù)3：彈窗寬度，根據(jù)頁(yè)面內(nèi)容定義
//參數(shù)4：彈窗高度
parent.index.dialog('pages/xxxx/add.html', '新增管理員用戶', '40%', '400px');
//刷新修改頁(yè)面(避免緩存數(shù)據(jù)導(dǎo)致修改回顯失敗)
parent.index.updateReload();
} else {
//參數(shù)1：彈窗內(nèi)引用的iframe地址
//參數(shù)2：彈窗名字
//參數(shù)3：彈窗寬度，根據(jù)頁(yè)面內(nèi)容定義
//參數(shù)4：彈窗高度
parent.index.dialog('pages/xxxx/add.html?id=' + module, '編輯管理員用戶', '40%', '400px');
//刷新修改頁(yè)面(避免緩存數(shù)據(jù)導(dǎo)致修改回顯失敗)
parent.index.updateReload();
}
},
}
})
</script>最后上效果圖，大功告成！文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-413628.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-413628.html
到了這里，關(guān)于vue + Element-UI下iframe子頁(yè)面彈窗蒙層只能遮罩子頁(yè)面問(wèn)題解決的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
