button enhancement;

简单做个记录，给自己看的哈哈！！！

应用场景

由于cdkdroplist多行时的item移动难用的一批，跟需求讨论决定搞成单行的滚动条；好了开干，玩的就是真实。item少的时候就不说了，正常。当item多时需要滚动，开始操作：

超出文本滚动，不换行... 等等，原本根据配置的居左居右咋办。原来的版本，靠左时，margin-right：auto;靠右时，margin-left：auto;
这下好了，auto不理你，但是你又要考虑item少时不需要滚动的场景。

前期css简单处理下，例如：tab最大宽度，tab超出文本省略号。开始处理逻辑：
当tab不够多不足以出现滚动条时:

此时也不需要过多的逻辑，只有删除tab后的选中逻辑；

当tab足够多足以出现滚动条时:

我们新建一个tab时，tab有默认tab名，此时tab滚动到最右边；

当修改完名称，自适应tab宽度至最右边;

当点击其他tab，且这个tab不完全暴露在视口时，点击后会滚动到该tab贴近左侧或者右侧，这里其实跟删除tab定位到上一个tab的功能是一样的。具体看思路及代码

那么还需要考虑到窗口变化时，也需要切换tab方法的判断：

实现思路

tabControl中三个属性分别是滚动到最左边，滚动到最右边，tab足够多足以出现滚动条；
鼠标点下左键或者右键时，触发鼠标滚动事件，此时hostlistener监听document的mousemove事件，事件里通过点下时拿到的是左键还是右键判断拿到一个滚动的方向，通过定时器一直加offsetX值，传给我们的droplist，动态样式[style.transform]=“’translateX（‘ + offsetX + ’px)‘”。其次就是scrollToSelectedTab的方法对于几种场景的集合判断。当完成tab名的修改时，新增tab时，删除时，点击时都指向该方法。具体看代码：

实现代码

这里有监听resize ，判断超出，没问题扔给scrollToSelectedTab方法

关键的scrollToSelectedTab方法