Vue 3 实现左侧列表点击跳转滚动到右侧对应区域的功能

使用 Vue 3 实现左侧列表点击跳转到右侧对应区域的功能

1. 引言

在这篇博客中，我们将展示如何使用 Vue 3 实现一个简单的页面布局，其中左侧是一个列表，点击列表项时，右侧会平滑滚动到对应的内容区域。这种布局在很多应用场景中都非常常见，比如目录导航、问答系统等。

2. 效果图

3. 代码示例

demo.vue

<template>
  <div class="container">
    <div class="sidebar">
      <ul>
        <li v-for="item in items" :key="item.id" @click="jump(item)">
          {
  { item.name }}
        </li>
      </ul>
    </div>
    <div class="content">
      <div
        v-for="item in items"
        :key="item.id"
        :ref="el => setCombinationRef(el, `comb-${item.id}`)"
        class="content-item"
      >
        <h2>{
  { item.name }}</h2>
        <p>{
  { item.description }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
      reactive,