当前位置:   article > 正文

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

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

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

  3. 创建el-menu: 在Vue组件中使用<el-menu>组件创建菜单。设置菜单项的index属性为对应的锚点目标的id。例如:

    1. <el-menu default-active="menu1" class="menu-demo" @select="handleMenuSelect">
    2. <el-menu-item index="menu1">Menu 1</el-menu-item>
    3. <el-menu-item index="menu2">Menu 2</el-menu-item>
    4. <el-menu-item index="menu3">Menu 3</el-menu-item>
    5. </el-menu>

    4、处理菜单选择事件: 在Vue组件中定义handleMenuSelect方法来处理菜单项的选择事件,使得点击菜单项时能够平滑滚动到对应的锚点目标。

    1. methods: {
    2. handleMenuSelect(index) {
    3. const anchor = document.getElementById(index);
    4. if (anchor) {
    5. anchor.scrollIntoView({ behavior: 'smooth' });
    6. }
    7. }
    8. }

    5、设置锚点目标: 在页面中添加与菜单项index值对应的锚点目标。确保锚点目标的id与菜单项的index值对应,这样点击菜单项时页面就会平滑滚动到相应的锚点目标位置

    1. <div id="menu1">Content for menu 1...</div>
    2. <div id="menu2">Content for menu 2...</div>
    3. <div id="menu3">Content for menu 3...</div>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/320817
推荐阅读
相关标签
  

闽ICP备14008679号