Tab enhancement;
应用场景
当tab足够多时,进行Tab功能提升。由上图实现下图。
前期css简单处理下,例如:tab最大宽度,tab超出文本省略号。开始处理逻辑:
当tab不够多不足以出现滚动条时:
此时也不需要过多的逻辑,只有删除tab后的选中逻辑;
当tab足够多足以出现滚动条时:
我们新建一个tab时,tab有默认tab名,此时tab滚动到最右边;
当修改完名称,自适应tab宽度至最右边;
当点击其他tab,且这个tab不完全暴露在视口时,点击后会滚动到该tab贴近左侧或者右侧,这里其实跟删除tab定位到上一个tab的功能是一样的。具体看思路及代码
那么还需要考虑到窗口变化时,也需要切换tab方法的判断:
实现思路