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

  1. 安装Element Plus: 确保已经安装了Element Plus库。可以使用npm或者yarn进行安装,具体步骤与上文提到的相同。

  2. 引入Element Plus: 在你的Vue 3项目中引入所需的Element Plus组件和样式。

  3. 创建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>
相关推荐
小林ixn11 小时前
从 onclick 到 React 合成事件,再到完整应用逻辑:一次前端架构的深度剖析
前端·react.js·前端框架
Csvn11 小时前
🧩「找不到模块」排查全记录——Monorepo 下 TypeScript 路径别名的 5 种「不通」与根治方案
前端
腻害兔12 小时前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:字典、短信、邮件、通知——后台系统的“基础设施四件套“!
java·前端·vue.js·产品经理·ai编程
CodexDave12 小时前
MySQL事务隔离级别与MVCC机制解析
前端·数据库·mysql·nginx·性能优化·负载均衡
Ai_easygo13 小时前
AI Agent开发入门——从ReAct到Tool Calling,拆解Agent的底层运行逻辑
前端·人工智能·react.js
研☆香13 小时前
分析制作html页面,如何划分页面结构
前端
腻害兔13 小时前
【若依项目-产品经理视角】RuoYi-Vue-Pro 源码拆解:支付模块 yudao-module-pay,一个让产品经理都看懂的支付中台设计
java·前端·vue.js·产品经理·ai编程
kyriewen13 小时前
我扒了最近的前端面经——2026年面试不背八股文了,考这5样
前端·面试·ai编程
IT_陈寒14 小时前
Redis的持久化配置把我坑惨了:你以为数据安全了?
前端·人工智能·后端
小徐_233314 小时前
uni-app 项目别再从零搭了!3 个 Wot UI 起手模板怎么选?
前端·uni-app