Vue 3项目中结合Element Plus的＜el-menu＞和CSS3创建锚点，以实现点击菜单项时平滑滚动到对应的锚点目标

<template>
  <el-menu :default-active="activeMenu" mode="horizontal" @select="handleSelect">
    <el-menu-item index="home">Home</el-menu-item>
    <el-menu-item index="about">About</el-menu-item>
    <el-menu-item index="contact">Contact</el-menu-item>
  </el-menu>
</template>
 
<script setup>
import { ref } from 'vue';
 
const activeMenu = ref('home');
 
function handleSelect(key, keyPath) {
  activeMenu.value = key;
}
</script>
 
<style scoped>
.el-menu--horizontal {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.el-menu-item {
  margin: 0 15px;
  cursor: pointer;
  transition: color 0.3s;
}
 
.el-menu-item:hover {
  color: #409EFF;
}
 
.el-menu-item.is-active {
  color: #409EFF;
}
</style>

这个例子展示了如何在Vue 3项目中使用Element Plus库创建一个水平的 el-menu，并通过CSS3为它的每个菜单项添加了平滑的过渡效果。当用户点击一个菜单项时，会更新当前激活的菜单项，并且通过CSS的变色效果提供视觉反馈。