tab标签+页面缓存

tab标签过多处理方法

首先，页面中出现tab标签的作用，记录用户点击的菜单，并做页面缓存。

1. 如果用户点击一次菜单，就将用户点击的菜单进行缓存。可能出现一种情况标签过多的情况下，页面无法展示过多的标签，或者说可以展示，但是页面效果不好。因此需要去做处理，既要保证页面功能可用，也要保证整体的美观度。
2. 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();    

3. 如何保证页面能展示相对应的标签的个数，不影响整体美观度?
   首先，确定要显示多少个比较合适，当然我们无法准确的估计能显示多少个，毕竟视图的大小不确定。我们可以假设tab的展示宽度占视图的1/3,我们可以由getBoundingClientRect算出body的宽度,然后取1/3处，最后假设每个tab标签的宽度，我们就可以得到我们可以展示的tab标签的个数。
4. 主要代码如下:
   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>