tab標(biāo)簽過(guò)多處理方法
首先，頁(yè)面中出現(xiàn)tab標(biāo)簽的作用态兴，記錄用戶(hù)點(diǎn)擊的菜單狠持，并做頁(yè)面緩存。
- 如果用戶(hù)點(diǎn)擊一次菜單瞻润，就將用戶(hù)點(diǎn)擊的菜單進(jìn)行緩存喘垂。可能出現(xiàn)一種情況標(biāo)簽過(guò)多的情況下绍撞，頁(yè)面無(wú)法展示過(guò)多的標(biāo)簽正勒，或者說(shuō)可以展示，但是頁(yè)面效果不好傻铣。因此需要去做處理章贞，既要保證頁(yè)面功能可用，也要保證整體的美觀度非洲。
- rectObject = object.getBoundingClientRect();如果是標(biāo)準(zhǔn)盒模型鸭限，元素的尺寸為width/height + padding + border的寬度，如果是box-sizing:
border-box;那么元素的尺寸為width/height; 返回的rectObject對(duì)象里面有屬性x,y,width,height,left,top,right,bottom都是相對(duì)于視口的寬度两踏；了解即可
rectObject = object.getBoundingClientRect();
- 如何保證頁(yè)面能展示相對(duì)應(yīng)的標(biāo)簽的個(gè)數(shù)败京，不影響整體美觀度?
首先，確定要顯示多少個(gè)比較合適缆瓣，當(dāng)然我們無(wú)法準(zhǔn)確的估計(jì)能顯示多少個(gè)喧枷，畢竟視圖的大小不確定。我們可以假設(shè)tab的展示寬度占視圖的1/3,我們可以由getBoundingClientRect算出body的寬度,然后取1/3處弓坞，最后假設(shè)每個(gè)tab標(biāo)簽的寬度隧甚，我們就可以得到我們可以展示的tab標(biāo)簽的個(gè)數(shù)。 - 主要代碼如下:
data中定義
原本考慮這里給確定的數(shù)值渡冻，但是后面會(huì)去監(jiān)聽(tīng)窗口的改變?nèi)缓笕ビ?jì)算展示的個(gè)數(shù)戚扳，如果出現(xiàn)一種情況，比如說(shuō)族吻，打開(kāi)控制臺(tái)又合上控制臺(tái)帽借。如果出現(xiàn)這種情況 ,setVisibleTag這個(gè)函數(shù)會(huì)執(zhí)行珠增，但是一開(kāi)始顯示的個(gè)數(shù)是定義好的個(gè)數(shù)，然而頁(yè)面的大小沒(méi)有變砍艾，所以給確定的數(shù)值會(huì)出現(xiàn)同一個(gè)視口但展示個(gè)數(shù)不同的情況蒂教，我們可以動(dòng)態(tài)的去計(jì)算頁(yè)面的大小，然后給一個(gè)初始值脆荷，這樣會(huì)比較好一點(diǎn)凝垛。避免了先打開(kāi)頁(yè)面后打開(kāi)控制臺(tái)的情況。
data() {
return {
visibleTagNum: parseInt( document.body.getBoundingClientRect().width / 255)
}
}
methods方法中
setVisibleTag() {
const width = document.body.getBoundingClientRect().width / 3;
this.visibleNumber = parseInt(width / 85);
},
監(jiān)聽(tīng)窗口大小去執(zhí)行setVisibleTag蜓谋，動(dòng)態(tài)計(jì)算展示個(gè)數(shù)
beforeMount() {
window.addEventListener('resize',this.setVisibleNum)
},
beforeDestroy() {
window.removeEventListener('resize',this.setVisibleNum)
}
頁(yè)面渲染代碼
// visitedViews為需要緩存操作的頁(yè)面
<el-tabs type="card" @tab-click="skipTo" v-model="activeName" closable @tab-remove="removeTab">
<el-tab-pane :label="tag.title" v-for="tag in visitedViews.slice(0,visibleNumber)" :key="tag.path" :name="tag.path" :data-name="tag.path"></el-tab-pane>
</el-tabs>
<el-dropdown v-if="visitedViews.length > this.visibleTagNum" @command="handleCommand">
<span class="el-dropdown-link" style="padding:0 20px;">
更多<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-for="(item,index) in visitedViews.slice(visibleTagNum)" :command="item.path">{{item.title}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
