元素居中平滑滚动效果

看了掘友的一篇文章：juejin.cn/post/736944… 实现了元素居中平滑滚动效果，但是只有js逻辑代码，没有html代码，自己花了点时间实现了vue里面怎么写

没什么多说的，直接上代码

<div class="container">
    <template v-for="(item, index) in cardList" :key="index">
        <div class="card" @click="scrollToCenter($event)">{{ item }}</div>
    </template>
</div>

const cardList = [
  "1111",
  "2222",
  "3333",
  "4444",
  "5555",
  "6666",
  "7777777",
  "8",
  "999",
  "1000000",
];

const scrollToCenter = e => {
  const element = e.target;
  const container = document.querySelector(".container");
  const containerRect = container.getBoundingClientRect(); // 获取容器的数据
  const elementRect = element.getBoundingClientRect(); // 获取卡片的数据
  const offset = elementRect.left - containerRect.left; // 偏移量
  const containerCenter = containerRect.width / 2; // 获取容器中间位置
  const elementCenter = elementRect.width / 2; // 获取卡片的中间位置
  // container.scrollLeft 容器滑动多少 +  offset 偏移值 + ( elementCenter到达卡片一半的位置 - containerCenter达到一半宽的位置)
  // ( elementCenter到达卡片一半的位置 - containerCenter达到一半宽的位置) == 卡片左头那个地方
  const scrollPos =
    container.scrollLeft + offset - containerCenter + elementCenter;

  container.scrollTo({
    left: scrollPos,
    behavior: "smooth",
  });
};

.container {
  width: 400px;
  height: 100%;
  border: 1px solid green;
  margin: 50px auto;
  overflow-x: auto; /* 启用水平滚动 */
  white-space: nowrap;
  border: 1px solid #ccc;
  position: relative;
  .card {
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.3s;
    border: 1px solid #ccc;
    margin: 0 5px;
  }
  .card:hover {
    background-color: #f0f0f0;
  }
  &::-webkit-scrollbar {
    display: none; /* Chrome 和 Safari 隐藏滚动条 */
  }
}