当前位置: 首页 > news >正文

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>
    

相关文章:

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

安装Element Plus&#xff1a; 确保已经安装了Element Plus库。可以使用npm或者yarn进行安装&#xff0c;具体步骤与上文提到的相同。 引入Element Plus&#xff1a; 在你的Vue 3项目中引入所需的Element Plus组件和样式。 创建el-menu&#xff1a; 在Vue组件中使用<el-me…...

C语言:数据在内存中的存储

目录 一、 整数在内存中的存储二、 大小端字节序和字节序判断1.什么是大小端2.为什么有大小端3.练习(1)练习1(2)练习2(3)练习3(4)练习4(5)练习5(6)练习6 三、 浮点数在内存中的存储1.练习2.浮点数的存储(1) 浮点数存的过程(2)浮点数取的过程 3.题目解析 一、 整数在内存中的存储…...

DP动态规划入门(数字三角形、破损的楼梯、安全序列)

一、动态规划&#xff08;DP&#xff09;简介 动态规划&#xff08;Dynamic Programming&#xff0c;简称DP&#xff09;是运筹学的一个分支&#xff0c;它是一种通过将复杂问题分解成多个重叠的子问题&#xff0c;并通过子问题的解来构建整个问题的解的算法。在动态规划中&am…...

HBase Shell的应用案例

电商( eshop)平台具有海量数据、高并发访问、高速读写等特征&#xff0c;适合使用HBase分布式数据库进行数据存储。本节通过一个 HBase在电商平台的应用案例&#xff0c;熟练掌握并综合运用HBase Shell命令行终端提供的各种操作命令。 一、电商(eshop)平台的逻辑数据模型 在H…...

Allegro许可管理技巧

在数字化时代&#xff0c;软件许可管理对于企业的运营至关重要。然而&#xff0c;许多企业在实施软件管理过程中会遇到各种问题。Allegro许可管理作为一款高效、合规的管理工具&#xff0c;能够帮助企业解决常见的许可管理问题。本文将深入探讨Allegro许可管理中的实用技巧&…...

34 vue 项目默认暴露出去的 public 文件夹 和 CopyWebpackPlugin

前言 这里说一下 vue.config.js 中的一些 public 文件夹是怎么暴露出去的? 我们常见的 CopyWebpackPlugin 是怎么工作的 ? 这个 也是需要 一点一点积累的, 因为 各种插件 有很多, 不过 我们仅仅需要 明白常见的这些事干什么的即可 当然 以下内容会涉及到一部分vue-cli,…...

Redis 不再“开源”,对中国的影响及应对方案

Redis 不再“开源”&#xff0c;使用双许可证 3 月 20 号&#xff0c;Redis 的 CEO Rowan Trollope 在官网上宣布了《Redis 采用双源许可证》的消息。他表示&#xff0c;今后 Redis 的所有新版本都将使用开源代码可用的许可证&#xff0c;不再使用 BSD 协议&#xff0c;而是采用…...

在CentOS中怎么安装和配置NginxWeb服务器

在CentOS中安装和配置Nginx Web服务器可以通过以下步骤完成&#xff1a; 1. 使用yum安装Nginx&#xff1a; sudo yum install nginx 2. 启动Nginx服务&#xff1a; sudo systemctl start nginx 3. 设置Nginx开机自启动&#xff1a; sudo systemctl enable nginx 4. 配置防火墙规…...

使用docker搭建Fluentd的教程

使用Docker搭建Fluentd的教程 步骤 1: 拉取Fluentd镜像 首先&#xff0c;需要从Docker Hub上拉取Fluentd的官方镜像&#xff1a; docker pull fluent/fluentd:v1.14-debian-1这里使用的是基于Debian的Fluentd 1.14版本的镜像&#xff0c;可以根据需要选择其他版本。 步骤 2…...

Python的re模块进行正则表达式操作时的常用方法[回顾学习]

re 模块是 Python 中用于处理正则表达式的标准库模块。通过 re 模块&#xff0c;可进行字符串匹配、搜索和替换等各种操作。 有几个常用的方法&#xff1a;# re.match(pattern, string)&#xff1a;从字符串开头开始匹配模式&#xff0c;并返回匹配对象。适合用于确定字符串是否…...

Rust之构建命令行程序(五):环境变量

开发环境 Windows 11Rust 1.77.0 VS Code 1.87.2 项目工程 这次创建了新的工程minigrep. 使用环境变量 我们将通过添加一个额外的功能来改进minigrep:一个不区分大小写的搜索选项&#xff0c;用户可以通过环境变量打开该选项。我们可以将此功能设置为命令行选项&#xff0c;…...

ARMday7

VID_20240322_203313 1.思维导图 2.main.c #include"key_inc.h" //封装延时函数 void delay(int ms) {int i,j;for(i0;i<ms;i){for(j0;j<2000;j){}} } int main() {//按键中断的初始化key1_it_config();key2_it_config();key3_it_config();while(1){printf(&q…...

Ubuntu中安装VSCode的一个指令

问题描述 本来想去VSCode官网上下载软件包&#xff0c;然后双击使用Ubuntu Software安装的&#xff0c;但是安装老不成功。 想用命令行指令dpkg进行安装&#xff0c;虽然能成功&#xff0c;但是后续使用 code . 命令打开VSCode又报错说找不到命令。 解决方式 在命令行中使用…...

生活电子产品拆解分析~汇总目录

一、锂电池电源 ①电子产品拆解分析-暖手宝 ②电子产品拆解分析-电动牙刷 ③电子产品拆解分析-充电宝台灯 ④电子产品拆解分析-太阳能自动感应灯 ⑤电子产品拆解分析-人体感应灯 ⑥电子产品拆解分析-食物电子秤 ⑦电子产品拆解分析-6600mA充电宝 ⑨电子产品拆解分析-触摸化妆镜…...

Tkinter 一文读懂

Tkinter 简介 Tkinter&#xff08;即 tk interface&#xff0c;简称“Tk”&#xff09;本质上是对 Tcl/Tk 软件包的 Python 接口封装&#xff0c;它是 Python 官方推荐的 GUI 工具包&#xff0c;属于 Python 自带的标准库模块&#xff0c;当您安装好 Python 后&#xff0c;就可…...

2核4G服务器阿里云性能测评和优惠价格表

阿里云2核4G服务器租用优惠价格&#xff0c;轻量2核4G服务器165元一年、u1服务器2核4G5M带宽199元一年、云服务器e实例30元3个月&#xff0c;活动链接 aliyunfuwuqi.com/go/aliyun 活动链接如下图&#xff1a; 阿里云2核4G服务器优惠价格 轻量应用服务器2核2G4M带宽、60GB高效…...

Day41:WEB攻防-ASP应用HTTP.SYS短文件文件解析Access注入数据库泄漏

目录 ASP-默认安装-MDB数据库泄漏下载 ASP-中间件-CVE&短文件&解析&写权限 HTTP.SYS&#xff08;CVE-2015-1635&#xff09;主要用作蓝屏破坏&#xff0c;跟权限不挂钩 IIS短文件(iis全版本都可能有这个问题) IIS文件解析 IIS写权限 ASP-SQL注入-SQLMAP使用…...

什么是单点登录?

单点登录&#xff08;Single Sign On&#xff0c;简称 SSO&#xff09;简单来说就是用户只需在一处登录&#xff0c;不用在其他多系统环境下重复登录。用户的一次登录就能得到其他所有系统的信任。 为什么需要单点登录 单点登录在大型网站应用频繁&#xff0c;比如阿里旗下有淘…...

elasticsearch的数据搜索

DSL查询文档 elasticsearch的查询依然是基于JSON风格的DSL来实现的。 Elasticsearch提供了基于JSON的DSL(Domain Specific Language)来定义查询。常见的查询类型包括: 查询所有:查询出所有数据,一般测试用。例如:match_all 全文检索(full text)查询:利用分词器对用户…...

云原生相关概念(小白版)

先说概念&#xff1a; 云原生应该是一种“建立在云上的多种效率提升技术的复合体"&#xff08;而不是单一的技术创新&#xff09;&#xff0c;主要就是在云技术摆脱物理储存限制的基础上&#xff0c;进一步实现应用的专业优化&#xff08;即文章里说的按功能切分&#xf…...

UE5 BaseEditorSettings.ini加载原理与配置生效机制

1. 为什么你改了BaseEditorSettings.ini却没生效&#xff1f;——从UE5编辑器启动流程讲起很多人在UE5项目里折腾半天&#xff0c;把BaseEditorSettings.ini文件翻来覆去改了十几遍&#xff0c;重启编辑器后发现&#xff1a;缩放比例还是不对、网格间距没变、甚至“启用实时预览…...

AI Agent在智能风控中的实战:多智能体欺诈检测与预警

AI Agent在智能风控中的实战:多智能体欺诈检测与预警 你有没有过明明是正常交易却被银行冻结账户的糟糕体验?或是听说过某电商平台上线新活动首日就被黑产团伙薅走数千万补贴的新闻?随着黑产欺诈向团伙化、专业化、动态化演进,传统依赖规则引擎、单模型机器学习的风控体系已…...

[智能体-69]:重新认知MCP:协议不生产智能,只是AI全域交互的标准化基石

MCP只是提供了大模型、编排调度、外部工具能够进行结构化交流的标准&#xff0c;而整个系统的智能主要依赖编排调度&#xff0c;与外部软件系统的交互取决于外部工具&#xff0c;包括外部语音交互、视觉交互、数字化交互。当下MCP&#xff08;Model Context Protocol&#xff0…...

论文创新点像挤牙膏?导师强推这几个AI论文平台

想写论文又快又好&#xff0c;关键是用对 AI 工具、走对流程——资深教授普遍推荐&#xff1a;千笔AI&#xff08;中文全流程首选&#xff09; 豆包学术版&#xff08;轻量高效&#xff09; DeepSeek 学术版&#xff08;理工 / 长文本&#xff09; Grammarly Academic&#xff…...

SSH工具对比:新手用户和熟练运维,选型逻辑有什么不同

结论 新手用户和熟练运维在选择 SSH 工具时&#xff0c;关注点往往完全不同。 新手更在意的是&#xff1a;能不能顺利连接、界面是否直观、文件和配置是否容易找到、网站出问题时能不能快速定位。 而熟练运维更在意的是&#xff1a;连接效率、命令自由度、多服务器管理能力、原…...

Python基础语法:常用内置函数

round()&#xff1a;四舍五入 # 省略 ndigits print(round(3.14)) # 输出 3&#xff08;int&#xff09; print(round(3.66)) # 输出 4# 指定 ndigits print(round(3.14159, 2)) # 输出 3.14&#xff08;float&#xff09; print(round(3.666, 2)) # 输出 3.67# …...

DeepSeek-R1补全能力封测倒计时(仅剩72小时开放API灰度权限):这份内部测试SOP已被3家头部科技公司紧急采购

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek-R1代码补全能力封测全景概览 DeepSeek-R1 是深度求索&#xff08;DeepSeek&#xff09;推出的高性能开源推理模型&#xff0c;在代码补全场景中展现出显著的上下文理解力与多语言泛化能力。本…...

CTF出题人视角:从NewStarCTF 2023的WEB题,聊聊PHP特性与Flask Debug的那些‘坑’

CTF出题艺术&#xff1a;从PHP特性到Flask Debug的攻防博弈 当一道精心设计的CTF题目被成功破解时&#xff0c;出题人与解题者之间往往存在一场无声的思维交锋。作为NewStarCTF 2023 WEB方向的出题人&#xff0c;我想通过复盘"Begin of PHP"和"ErrorFlask"…...

观察Taotoken在多模型聚合调用下的路由与失败重试效果

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 观察Taotoken在多模型聚合调用下的路由与失败重试效果 在构建依赖大模型能力的应用时&#xff0c;服务的稳定性是开发者关注的核心…...

3步搞定B站缓存视频转换:m4s转MP4的终极解决方案

3步搞定B站缓存视频转换&#xff1a;m4s转MP4的终极解决方案 【免费下载链接】m4s-converter 一个跨平台小工具&#xff0c;将bilibili缓存的m4s格式音视频文件合并成mp4 项目地址: https://gitcode.com/gh_mirrors/m4/m4s-converter 你是否曾经在B站缓存了珍贵的视频&a…...