如何用Vue状态模式实现灵活自由的窗口停靠管理功能？

本文共计1967个文字，预计阅读时间需要8分钟。

昨日完成的tabs窗口，非常满意。今天继续追求卓越，将其打造成可根据自身大小变化显示样式的可调节宽度tab页，宽度适中时，tab页可悬浮停靠其一侧。整体效果：左侧 + 右侧 + 来了，喜欢简单明了的东西”。

昨天做的tabs窗口，非常满意，今天乘胜追击，把它做成了可以根据自身大小改变显示样式，自身宽度过小时，tab页可以浮动停靠其一侧。具体效果：

左侧

右侧

向来喜欢简单明了的东西，所以想实现的简单一点，无奈现实不允许啊，功能实在有一丢丢复杂。硬着头皮搞了整整一下午，终于完成。

左侧跟右侧窗口，要使用同一个控件，尽量增加代码的可复用性，控件的状态就有些多：正常显示（普通tabs窗口），列表（显示图标跟标题，点击时弹出tab页），迷你列表（只显示图标，点击时弹出tab页）。

控件在界面左侧时，tab页弹出在其右侧。反之，控件在界面右侧时，tab页弹出在其左侧。

从正常tabs，缩小到列表显示时，所有tab都是不被激活的。从列表放大到正常tabs，要默认一个标签（tab）是被选中的。

这么多的状态要求，代码很容易就乱掉。不过还好，设计模式中有一个叫“状态模式”的，可以很好的解决这个问题，缺点就是初期代码量稍大，优点是便于后期管理。

昨天做了两个tabs控件，一个是WidgetTabs，另外一个是PageTabs，后者现在还能满足我们的需求，只需要修改WidgetTabs这一个就行。

昨天实现的一些代码删掉，首先重写模板，根据模板写脚本代码，可以让脚本代码更实用些，就像测试驱动的开发里，先写测试再写代码，是一个道理。

还有，差点忘了。