前言
公司分好幾個(gè)后臺(tái)模塊，統(tǒng)一使用vue+elementUi框架開(kāi)發(fā)，每一個(gè)后臺(tái)模塊都是單獨(dú)團(tuán)隊(duì)開(kāi)發(fā)的。并且?guī)讉€(gè)系統(tǒng)整體的風(fēng)格、布局一樣的，包括左側(cè)邊欄，上方的面包屑等
用戶在使用的時(shí)候，可能要切換別的系統(tǒng)就要在瀏覽器里，新打開(kāi)窗口，再輸入網(wǎng)址，回車。
總結(jié)來(lái)說(shuō)，低效，所以現(xiàn)在想將幾個(gè)系統(tǒng)融合到一個(gè)里邊，并且每次切換系統(tǒng)的時(shí)候保留用戶的操作。
https://github.com/Mrblackant/vueIframe
效果如圖：
實(shí)現(xiàn)思路
1.結(jié)合iframe開(kāi)發(fā)上方系統(tǒng)切換的組件
2.各個(gè)子系統(tǒng)有自己的域名
開(kāi)發(fā)
因?yàn)槊總€(gè)頁(yè)面都需要這個(gè)切換功能，所以我們直接在app.vue里開(kāi)發(fā)。我是用vue+element開(kāi)發(fā)的，所以切換的地方直接用了ele的tab切換組件。(寫法有很多種，主要是思路)
讀完這些話再看代碼，方便理解：
1.如果用v-if控制每個(gè)iframe的顯示隱藏，那么切換后系統(tǒng)后，再切換回來(lái)，iframe的屬性會(huì)使頁(yè)面會(huì)刷新，用戶的操作不能保留
2.如果純粹用elementUi的tab組件來(lái)做，頁(yè)面一進(jìn)來(lái)，就會(huì)把每個(gè)系統(tǒng)的資源加載進(jìn)來(lái)，卡的要命，所以需要做到按需加載
3.實(shí)現(xiàn)：結(jié)合1、2問(wèn)題，用v-if控制頁(yè)面一進(jìn)來(lái)，只加載一個(gè)默認(rèn)的系統(tǒng)；tab切換的時(shí)候再利用v-if去加載該系統(tǒng)的資源；v-if只控制一次，不會(huì)隨著tab的切換變化，這樣就能保證切換系統(tǒng)時(shí)保留了用戶的操作。
代碼
app.vue
<template> <div id="app"><div class="allWapper"> <!-- logo --> <div class="myLogo"> <img src="/static/mylogo.png"> </div> <!-- 頂部tabs --> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane class="temp" label="VUE" name="first"> <iframe v-if="ifArr.first" class="ifa" scrolling=auto src="http://panjiachen.github.io/vue-element-admin/#/dashboard" frameborder="0"></iframe> </el-tab-pane> <el-tab-pane class="temp" label="SF" name="second"> <iframe v-if="ifArr.second" class="ifa" scrolling=auto src="https://segmentfault.com/" frameborder="0"></iframe> </el-tab-pane> <el-tab-pane class="temp" label="百度" name="third"> <iframe v-if="ifArr.third" class="ifa" scrolling=auto src="https://www.baidu.com/" frameborder="0"></iframe> </el-tab-pane> </el-tabs></div><!-- </div> --> <!-- <router-view/> --> </div></template><script>export default { name: 'App', data(){ return{ activeName: 'first', ifArr:{ first:true, second:false, third:false } } }, methods:{ handleClick(tab, event) { let flagName=tab.name this.ifArr[flagName]=true } }}</script><style>body{ margin:0; padding:5px;}.ifa{ width:100%;height:100%; } .el-tabs__content{ border: 1px solid red; border-top:none; position: absolute; top: 62px; left: 0; bottom: 0; right: 0; // width:100%; // height:80%; } .allWapper{ display:flex; border-bottom:1px solid #e4e7ed; } .el-tabs__header{ margin-bottom:0px; } .el-tabs__header .el-tabs__item{ margin:8px 0; font-size:16px; padding-left:29px; } .temp{ width:100%; height:100%; }.myLogo{ width: 200px; height: 53px; margin-right:35px;}.myLogo img{ width:100%;}</style>新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
