-
安装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方法来处理菜单项的选择事件,使得点击菜单项时能够平滑滚动到对应的锚点目标。TypeScriptmethods: { 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>
Vue 3项目中结合Element Plus的<el-menu>和CSS3创建锚点,以实现点击菜单项时平滑滚动到对应的锚点目标
石头剪刀布左2024-03-23 15:38
相关推荐
细节控菜鸡42 分钟前
【2025最新】ArcGIS for JS 实现随着时间变化而变化的热力图2501_916008891 小时前
Web 前端开发常用工具推荐与团队实践分享SkylerHu1 小时前
前端代码规范:husky+ lint-staged+pre-commit菜鸟una2 小时前
【微信小程序 + 消息订阅 + 授权】 微信小程序实现消息订阅流程介绍,代码示例(仅前端)Yeats_Liao2 小时前
Go Web 编程快速入门 05 - 表单处理:urlencoded 与 multipart飞翔的佩奇2 小时前
【完整源码+数据集+部署教程】【运动的&足球】足球场地区域图像分割系统源码&数据集全套:改进yolo11-RFAConv拉不动的猪2 小时前
h5后台切换检测利用visibilitychange的缺点分析桃子不吃李子2 小时前
nextTick的使用萌新小码农2 小时前
SpringBoot+alibaba的easyexcel实现前端使用excel表格批量插入冰暮流星3 小时前
css3新增背景图片样式