-
安装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
相关推荐
To_OC2 小时前
LC 131 分割回文串:刚学回溯时,我连怎么切字符串都想不明白咩咩啃树皮3 小时前
第40篇:Vue3组件化开发精讲——组件拆分、复用、父子通信、工程化架构阳光是sunny3 小时前
LangGraph中的Reducer是什么触底反弹3 小时前
一文搞懂 Tailwind CSS 弹性布局:从原理到实战阳光是sunny3 小时前
从链到图:LangGraph 入门基础全解析To_OC4 小时前
LC 42 接雨水:暴力超时卡半天?前后缀数组一用就通了小林ixn4 小时前
从 ??= 到 onKeyDown:一个 React 组件的“自我修养”REDcker5 小时前
显示分辨率标准对照详解এ慕ོ冬℘゜5 小时前
前端实战:jQuery 多条件联合搜索(标题模糊查询 + 日历时间段筛选)武子康5 小时前
Search Console Platform Properties 扩大 SEO 资产边界:从 Page Ranking 到 Topic Coverage(5 类误读边界 + 3 表数据层设计)