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

石头剪刀布左2024-03-23 15:38

安装Element Plus： 确保已经安装了Element Plus库。可以使用npm或者yarn进行安装，具体步骤与上文提到的相同。
引入Element Plus： 在你的Vue 3项目中引入所需的Element Plus组件和样式。
创建el-menu： 在Vue组件中使用<el-menu>组件创建菜单。设置菜单项的index属性为对应的锚点目标的id。例如：
html 复制代码
```
<el-menu default-active="menu1" class="menu-demo" @select="handleMenuSelect">
  <el-menu-item index="menu1">Menu 1</el-menu-item>
  <el-menu-item index="menu2">Menu 2</el-menu-item>
  <el-menu-item index="menu3">Menu 3</el-menu-item>
</el-menu>
```
4、处理菜单选择事件： 在Vue组件中定义handleMenuSelect方法来处理菜单项的选择事件，使得点击菜单项时能够平滑滚动到对应的锚点目标。
TypeScript 复制代码
```
methods: {
  handleMenuSelect(index) {
    const anchor = document.getElementById(index);
    if (anchor) {
      anchor.scrollIntoView({ behavior: 'smooth' });
    }
  }
}
```
5、设置锚点目标： 在页面中添加与菜单项index值对应的锚点目标。确保锚点目标的id与菜单项的index值对应，这样点击菜单项时页面就会平滑滚动到相应的锚点目标位置
html 复制代码
```
<div id="menu1">Content for menu 1...</div>
<div id="menu2">Content for menu 2...</div>
<div id="menu3">Content for menu 3...</div>
```