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。例如:

    <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方法来处理菜单项的选择事件,使得点击菜单项时能够平滑滚动到对应的锚点目标。

    methods: {handleMenuSelect(index) {const anchor = document.getElementById(index);if (anchor) {anchor.scrollIntoView({ behavior: 'smooth' });}}
    }
    

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/764274.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Unity发布webgl之后打开PDF文件,不使用js,不和浏览器交互

创建一个按钮&#xff0c;然后点击就会打开 在webgl下要使用这样的路径拼接&#xff0c;不然就会报错。 btnBook.onClick.AddListener(() >{var uri new System.Uri(Path.Combine(Application.streamingAssetsPath "/Books", "文档.pdf"));Debug.Log…

PyTorch深度学习:如何实现遥感影像的自动化地物分类?

我国高分辨率对地观测系统重大专项已全面启动&#xff0c;高空间、高光谱、高时间分辨率和宽地面覆盖于一体的全球天空地一体化立体对地观测网逐步形成&#xff0c;将成为保障国家安全的基础性和战略性资源。未来10年全球每天获取的观测数据将超过10PB&#xff0c;遥感大数据时…

前端根据pdf连接点击下载pdf而不是直接打开

参考地址: https://www.cnblogs.com/jackson-yqj/p/11321275.html /*** 文件链接转文件流下载--主要针对pdf 解决谷歌浏览器a标签下载pdf直接打开的问题* param url &#xff1a;文件链接* param fileName &#xff1a;文件名;* param type &#xff1a;文件类型;*/functio…

Azure databricks spark overwrite 全量更新的时候容易碰到的问题

原因&#xff1a;Azure databricks spark overwrite 全量ADS层表更新的时候容易碰到的问题正在写入结果有服务请求这个表的数据那如何避免呢&#xff1f; 1、 databricks spark overwrite 到的的时候会先TRUNCATE TABLE 然后再写入&#xff0c;就会碰到查询是空的情况&#xff…

Prompt进阶系列4:LangGPT(构建高性能Prompt实践指南)--结构化Prompt

Prompt进阶系列4:LangGPT(构建高性能Prompt实践指南)–结构化Prompt 1.结构化 Prompt简介 结构化的思想很普遍&#xff0c;结构化内容也很普遍&#xff0c;我们日常写作的文章&#xff0c;看到的书籍都在使用标题、子标题、段落、句子等语法结构。结构化 Prompt 的思想通俗点…

从零开始学Spring Boot系列-集成Kafka

Kafka简介 Apache Kafka是一个开源的分布式流处理平台&#xff0c;由LinkedIn公司开发和维护&#xff0c;后来捐赠给了Apache软件基金会。Kafka主要用于构建实时数据管道和流应用。它类似于一个分布式、高吞吐量的发布-订阅消息系统&#xff0c;可以处理消费者网站的所有动作流…

[音视频学习笔记]七、自制音视频播放器Part2 - VS + Qt +FFmpeg 写一个简单的视频播放器

前言 话不多说&#xff0c;重走霄骅登神路 前一篇文章 [音视频学习笔记]六、自制音视频播放器Part1 -新版本ffmpeg&#xff0c;Qt VS2022&#xff0c;都什么年代了还在写传统播放器&#xff1f; 本文相关代码仓库&#xff1a; MediaPlay-FFmpeg - Public 转载雷神的两个流程…

常用的IDE推荐

程序员在选择集成开发环境&#xff08;IDE&#xff09;时&#xff0c;会考虑多种因素&#xff0c;包括易用性、功能丰富性、性能以及是否支持他们正在使用的编程语言。以下是一些建议的IDE及其优点&#xff1a; 1.JetBrains PyCharm&#xff1a;专为Python开发而设计的IDE。 优…

Flutter动画(一)Ticker、Animate 原理

在任何系统的UI框架中&#xff0c;动画原理都是类似的&#xff0c;即&#xff1a;在一段时间内&#xff0c;快速地多次改变UI外观&#xff1b;由于人眼会产生视觉暂留&#xff0c;所以最终看到的就是一个“连续”的动画。 Flutter中对动画进行了抽象&#xff0c;主要涉及 Anim…

ubuntu生成 设置 core文件

ubuntu生成&设置core文件&#xff0c;调试段错误_ubuntu生成core文件-CSDN博客 ubuntu设置core文件_ubuntu core文件默认位置-CSDN博客 ulimit -a sudo vim /etc/profile #或者 vi ~/.bashrc ulimit -c unlimited #添加&#xff0c; 退出source /etc/profile sudo…

100个python代码(三)

列表排序: pythonCopy code my_list [3, 1, 4, 1, 5, 9, 2] my_list.sort() 生成器表达式: pythonCopy code gen_exp (x**2 for x in range(10)) for x in gen_exp: print(x) 字典推导式: pythonCopy code square_dict {x: x**2 for x in range(5)} 集合推导式: p…

后端前行Vue之路(一):初识Vue

1.Vue是什么 Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第三方库或既有项目整合。另一方…

Redis系列学习文章分享---第十四篇(Redis多级缓存--封装Http请求+向tomcat发送http请求+根据商品id对tomcat集群负载均衡)

目录 Redis的实战篇-多级缓存1-多级缓存-怎么封装Http请求工具&#xff1f;示例代码 2-多级缓存-怎么向tomcat发送http请求&#xff1f;示例代码 3-多级缓存-怎么根据商品id对tomcat集群负载均衡&#xff1f;4-多级缓存-Redis缓存预热怎么做&#xff1f;示例代码 5-多级缓存-怎…

智能教育系统中大模型的应用及其对学习效果的影响

1. 背景介绍 随着人工智能技术的飞速发展&#xff0c;大模型在各个领域都取得了显著的成果。在教育领域&#xff0c;智能教育系统中的大模型应用也日益受到关注。本文将探讨智能教育系统中大模型的应用及其对学习效果的影响。 2. 核心概念与联系 2.1 智能教育系统 智能教育…

如何用pytorch调用预训练Swin Transformer中的一个Swin block模块

1&#xff0c;首先&#xff0c;我们需要知道的是&#xff0c;想要调用预训练的Swin Transformer模型&#xff0c;必须要安装pytorch2&#xff0c;因为pytorch1对应的torchvision中不包含Swin Transformer。 2&#xff0c;pytorch2调用预训练模型时&#xff0c;不建议使用pretr…

【python】python3基础

文章目录 一、安装pycharm 二、输入输出输出 print()文件输出&#xff1a;格式化输出&#xff1a; 输入input注释 三、编码规范四、变量保留字变量 五、数据类型数字类型整数浮点数复数 字符串类型布尔类型序列结构序列属性列表list &#xff0c;有序多维列表列表推导式 元组tu…

std::thread使用及实现原理精讲(全)

C进阶专栏&#xff1a;http://t.csdnimg.cn/HGkeZ 相关系列文章&#xff1a; std::thread使用及实现原理精讲(全) 有了std::thread&#xff0c;为什么还需要引入std::jthread&#xff1f; 目录 1.windows创建线程 2.linux创建线程 3._beginthread小融合 4.CreateThread与_…

基于python+vue网络相册设计与实现flask-django-nodejs-php

网络相册设计与实现的目的是让使用者可以更方便的将人、设备和场景更立体的连接在一起。能让用户以更科幻的方式使用产品&#xff0c;体验高科技时代带给人们的方便&#xff0c;同时也能让用户体会到与以往常规产品不同的体验风格。 与安卓&#xff0c;iOS相比较起来&#xff0…

构造函数(原型和原型链)

原型和原型链 今日目标&#xff1a;原型和原型链是高频面试题 1.原型 2.原型链 要求&#xff1a;清晰的说出来原型和原型链的概念和特性。并能手绘原型和原型链图 3.swiper轮播图插件的使用 00-回顾 # 面向过程&#xff1a; 概念&#xff1a; 根据流程步骤一步步实现特定…

CentOS/RHEL 6.5 上 NFS mount 挂起kernel bug

我本身有四台机器做WAS集群&#xff0c;挂载nfs&#xff0c;其中随机一台客户端计算机端口关闭释放将进入不良状态&#xff0c;对 NFSv4 挂载的任何访问都将挂起&#xff08;例如“ls&#xff0c;cd 或者df均挂起”&#xff09;。这意味着没有人并且所有需要访问共享的用户进程…