昨天做的tabs窗口，非常满意，今天乘胜追击，把它做成了可以根据自身大小改变显示样式，自身宽度过小时，tab页可以浮动停靠其一侧。具体效果：
左侧
右侧
向来喜欢简单明了的东西，所以想实现的简单一点，无奈现实不允许啊，功能实在有一丢丢复杂。硬着头皮搞了整整一下午，终于完成。
左侧跟右侧窗口，要使用同一个控件，尽量增加代码的可复用性，控件的状态就有些多：正常显示（普通tabs窗口），列表（显示图标跟标题，点击时弹出tab页），迷你列表（只显示图标，点击时弹出tab页）。
控件在界面左侧时，tab页弹出在其右侧。反之，控件在界面右侧时，tab页弹出在其左侧。
从正常tabs，缩小到列表显示时，所有tab都是不被激活的。从列表放大到正常tabs，要默认一个标签（tab）是被选中的。
这么多的状态要求，代码很容易就乱掉。不过还好，设计模式中有一个叫“状态模式”的，可以很好的解决这个问题，缺点就是初期代码量稍大，优点是便于后期管理。
昨天做了两个tabs控件，一个是WidgetTabs，另外一个是PageTabs，后者现在还能满足我们的需求，只需要修改WidgetTabs这一个就行。
昨天实现的一些代码删掉，首先重写模板，根据模板写脚本代码，可以让脚本代码更实用些，就像测试驱动的开发里，先写测试再写代码，是一个道理。
还有，差点忘了。昨天的代码里，把所有的style样式都放在style.css这个文件里了，让后vue全局引入，随着我们写的控件越来越多，这个文件会越来越臃肿，不便于管理。这次把WidgetTabs相关的style代码，拿到vue组件里面。
先看模板代码：
<template><div class="widget-tabs" :class="stateClass" ref="widget">
<ul class="heads">
<li v-for="tab in tabs" class="item" :class="{ 'active': tab.isShow }" @click="click(tab)">
<div v-show="showIcon" class="tab-icon"><i :class="tab.icon"></i></div>
<span v-show="showTitle"> {{ tab.name }}</span>
</li>
</ul>
<div v-show="showTabBody" class="tab-body" :class="dockLeft?'dock-left':''">
<div v-show="showTabTitle" class="tab-title">
<div>{{selectedTab ? selectedTab.name : ''}}</div>
<div class="tab-close" @click="close">×</div>
</div>
<slot></slot>
</div>
</div>
</template>
顶层的DIV是我们这个控件的壳子，class对应三个状态的三个css class：
