vue3中右侧26个英文字母排列，点击字母，平滑到响应内容

效果图如下：

右侧悬浮

<!-- 右侧悬浮组件 -->
    <div class="right-sort">
      <div v-for="(item, index) in list" :key="index" class="sort-item" 
        :class="index === activeIndex ? 'sort-item-active' : ''" 
        @click="changeActive(index)"
      >
        {{item.first_char}}
      </div>
    </div>

左侧内容用id绑定

<n-card :id="'card-' + index" :title="item.first_char" class="mb-3" hoverable>
          <n-grid :x-gap="20" :cols="6">
            <n-grid-item v-for="(itm, idx) in item.children" :key="idx" class="" @click="handleCreate(itm)">
              <div class="sub-item">
                <div class="items"><n-avatar round :size="52" :src="itm.cover" /></div>
                <div class="items mt-1">{{ itm.car_name }}</div>
              </div>
            </n-grid-item>
          </n-grid>
        </n-card>

js代码

const activeIndex = ref(0)
const changeActive = (index) => {
  activeIndex.value = index

  let CardId = document.querySelector('#card-' + index)
  //使用平滑属性
  window.scrollTo({
    'top': CardId.offsetTop - 70,
    'behavior': 'smooth'
  })
}

第二种方法是用vue3的ref。