tab点击实现滚动中间效果vue3

<div class="chart-tab">
<van-tag
  v-for="(item, idx) in chartTabList"
  :key="idx"
  :class="[current === item.value ? 'active' : '']"
  @click="handleTabClick(item, $event)"
>{{ item.name }}</van-tag>
</div>

let current = ref('9') // 默认9:今年以来
// 1:一个月，2:三个月，3:六个月，6:五年，9:今年以来
const chartTabList = ref([
  {
    name: '近1月',
    value: '1'
  },
  {
    name: '近3月',
    value: '2'
  },
  {
    name: '近6月',
    value: '3'
  },
  {
    name: '今年以来',
    value: '9'
  },
  {
    name: '近5年',
    value: '6'
  }
])

const handleTabClick = async(item, event) => {
  current.value = item.value
  const tabContainer = document.querySelector(".chart-tab")
  const containerW = tabContainer.offsetWidth
  const clickedElement = event.target
  // 获取到当前点击元素的 offsetLeft  - 包裹盒子 offsetWidth 的一半 + 当前点击元素 offsetWidth 的一半
  let scrollLeftNum =clickedElement.offsetLeft - containerW / 2 + clickedElement.offsetWidth / 2
  // console.log(scrollLeftNum,'距离')
  // 赋值
  tabContainer.scrollLeft = scrollLeftNum
  // 切换
}

.chart-tab {
  padding-bottom: 16px;
  text-align: center;
  overflow-x: auto;
  white-space: nowrap;
  scroll-behavior: smooth;
  :deep(.van-tag) {
    font-size: 14px;
    color: var(--text_level2);
    background: var(--dialog_background);
    margin-right: 8px;
    padding: 4px 8px;
    border-radius: 8px;
    &.active {
      color: var(--button_blue);
      background: var(--chart_linechart_background);
    }
  }
  &::-webkit-scrollbar {
    display: none;
  }
}