Vue实现动态tab标签滚动定位跟随动画 Vue实现动态tab标签滚动定位跟

【Vue实现动态tab标签滚动定位跟随动画】尽管目前大多数 UI 框架都有 tab 组件，但是有时候并不能满足需求，或者需要对组件进行二次开发，考虑到总总原因，还是决定自己亲手写一个算了。

文章图片

Element.getBoundingClientRect()
实现其实不难，这里只需使用 getBoundingClientRect 这个函数就可以，根据文档的介绍，该方法返回元素的大小及其相对于视窗的位置。

文章图片

看图后应该不难理解，图中 0,0 指定是浏览器中窗口的左上角，因此使用该函数后元素返回的 top、bottom、left、right 都是相对窗口左上角的位置。
设计分析
由于 tab 的数量不是固定的，很有可能超出元素边界，所以需要用外层来包裹 tab 层，并且是 overflow: hidden，滚动效果通过改变 css 中的 translate 来实现。

实现分析
如何计算滚动位置？只要通过 getBoundingClientRect 取得各元素的位置后，再判断 tab 是否超出父级元素的边界，然后根据当前选中的 tab 位置计算出向前或向后需要滚动多少像素。

less样式

.cat-tabbar { display: flex; align-items: center; width: 100%; border-top: 1px solid #f2f2f2; padding-top: 8px; &__arrow { display:flex; align-items:center; height: 40px; line-height: 0; padding: 0 16px; cursor: pointer; color: #fff; background-color: #000; &:hover { color: dodgerblue; } }&__container { flex: 1; overflow: hidden; }&__list { display: flex; white-space: nowrap; transition: transform 200ms; }&__item { display: flex; align-items: stretch; height: 40px; cursor: pointer; border-top-left-radius: 4px; border-top-right-radius: 4px; .tab-text { display: flex; justify-content: center; align-items: center; padding-left: 20px; color: #777; // 既是最后一个，又是第一个 &:last-child:first-child { padding-right: 20px; } }.tab-close { display: flex; justify-content: center; align-items: center; width: 40px; height: 100%; color: #313b46; span { font-size: 12px; transition: color 200ms; }span:hover { color: red; } } }&__item.is-active { background-color: dodgerblue; .tab-text { color: #fff; }.tab-close { color: #fff; } } }