vue tab 左右滚动高亮 需求

Question

需求一是: 可视区域显示5个 当我点击第5个的时候 整体向左移动 把6显示出来 这时候1应该是隐藏了 然后 我点击2的时候 1显示出来。以此类推

需求二是: 每个列表 都有一个ID 我是从一级页面点击过来 传过一个ID
我向我传过来的ID 然后高亮 滚动到可视区域

我是用vue框架写的 想了半天 没有头绪 ，前辈有好的案例么

Answer 1

const tabsEl = this.tabsEl
let allWidth = tabsEl.offsetWidth
let currentWidth = e.target.offsetWidth
let currentLeft = e.target.offsetLeft
const left = currentLeft + currentWidth / 2 - allWidth / 2;
tabsEl.scrollLeft = left;

tabsEl是左右滚动列表的容器， e 是当前点击的元素