tab标签过多处理方法
首先，页面中出现tab标签的作用，记录用户点击的菜单，并做页面缓存。
- 如果用户点击一次菜单，就将用户点击的菜单进行缓存。可能出现一种情况标签过多的情况下，页面无法展示过多的标签，或者说可以展示，但是页面效果不好。因此需要去做处理，既要保证页面功能可用，也要保证整体的美观度。
- rectObject = object.getBoundingClientRect();如果是标准盒模型，元素的尺寸为width/height + padding + border的宽度，如果是box-sizing:
border-box;那么元素的尺寸为width/height; 返回的rectObject对象里面有属性x,y,width,height,left,top,right,bottom都是相对于视口的宽度；了解即可
rectObject = object.getBoundingClientRect();
- 如何保证页面能展示相对应的标签的个数，不影响整体美观度?
首先，确定要显示多少个比较合适，当然我们无法准确的估计能显示多少个，毕竟视图的大小不确定。我们可以假设tab的展示宽度占视图的1/3,我们可以由getBoundingClientRect算出body的宽度,然后取1/3处，最后假设每个tab标签的宽度，我们就可以得到我们可以展示的tab标签的个数。 - 主要代码如下:
data中定义
原本考虑这里给确定的数值，但是后面会去监听窗口的改变然后去计算展示的个数，如果出现一种情况，比如说，打开控制台又合上控制台。如果出现这种情况 ,setVisibleTag这个函数会执行，但是一开始显示的个数是定义好的个数，然而页面的大小没有变，所以给确定的数值会出现同一个视口但展示个数不同的情况，我们可以动态的去计算页面的大小，然后给一个初始值，这样会比较好一点。避免了先打开页面后打开控制台的情况。
data() {
return {
visibleTagNum: parseInt( document.body.getBoundingClientRect().width / 255)
}
}
methods方法中
setVisibleTag() {
const width = document.body.getBoundingClientRect().width / 3;
this.visibleNumber = parseInt(width / 85);
},
监听窗口大小去执行setVisibleTag，动态计算展示个数
beforeMount() {
window.addEventListener('resize',this.setVisibleNum)
},
beforeDestroy() {
window.removeEventListener('resize',this.setVisibleNum)
}
页面渲染代码
// visitedViews为需要缓存操作的页面
<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>
