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

Vue - 实现垂直菜单分类栏目，鼠标移入后右侧出现悬浮二级菜单容器效果（完整示例源码，详细代码注释，一键复制开箱即用）

news 2026/2/9 23:44:12

前言

网上的教程都太乱了，各种杂乱无注释代码、图片资源丢失、一堆样式代码，根本无法改造后应用到自己的项目中。

本文实现了 在 Vue / Nuxt 项目中，垂直分类菜单项，当用户鼠标移入菜单后，右侧自动出现二级分类悬浮容器盒子效果，

您可以直接复制源码，然后按照您的需求再稍微改改样式就能用了，

如下图所示，无任何第三方依赖及插件，并且涉及到的所有图片、图标资源都为您准备好了！

超详细注释，无任何乱七八糟的代码

在这里插入图片描述

示例源码

推荐使用一键复制功能，避免漏选代码。

随便找个新页面，一键复制运行起来。

<template><div class<

相关文章：

Vue - 实现垂直菜单分类栏目，鼠标移入后右侧出现悬浮二级菜单容器效果（完整示例源码，详细代码注释，一键复制开箱即用）

前言 网上的教程都太乱了，各种杂乱无注释代码、图片资源丢失、一堆样式代码，根本无法改造后应用到自己的项目中。 本文实现了 在 Vue / Nuxt 项目中，垂直分类菜单项，当用户鼠标移入菜单后，右侧自动出现二级分类悬浮容器盒子效果， 您可以直接复制源码，然后按照您的需求再…...

编程日记 2023/4/26 14:23:41

NVM-无缝切换Node版本

NVM-无缝切换Node版本 如果未使用nvm之前已经下载了node&#xff0c;并且配置了环境变量,那么此时删除这些配置(Node的环境以及Node软件),使用nvm是为了在某些项目中使用低版本的node NVM下载 进入github的nvm readme&#xff1a; https://github.com/coreybutler/nvm-windows…...

编程日记 2023/6/1 4:10:44

CCF-CSP真题《202303-1 田地丈量》思路+python，c++满分题解

想查看其他题的真题及题解的同学可以前往查看&#xff1a;CCF-CSP真题附题解大全 试题编号&#xff1a;202303-1试题名称&#xff1a;田地丈量时间限制&#xff1a;1.0s内存限制&#xff1a;512.0MB问题描述&#xff1a; 问题描述 西西艾弗岛上散落着 n 块田地。每块田地可视为…...

编程日记 2023/4/26 14:13:37

Autosar-软件架构

文章目录 一、Autosar软件架构分层图二、应用层三、RTE层四、BSW层1、微控制器抽象层2、ECU抽象层I/O硬件抽象COM硬件抽象Memory硬件抽象Onboard Device Abstraction3、复杂驱动层4、服务层系统服务通信服务CAN一、Autosar软件架构分层图 架构分层是实现软硬件分离的关键，它也…...

编程日记 2023/4/26 14:08:36

8年测开年薪30W，为什么从开发转型为测试？谈谈这些年的心路历程……

谈谈我的以前&#xff0c;从毕业以来从事过两个多月的Oracle开发后转型为软件测试&#xff0c;到现在已近过去8年成长为一个测试开发工程师&#xff0c;总结一下之间的心路历程&#xff0c;希望能给徘徊在开发和测试之前的同学一点小小参考。 一、测试之路伏笔 上学偷懒&#…...

编程日记 2023/4/26 14:03:35

滑动奇异频谱分析：数据驱动的非平稳信号分解工具（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/4/26 13:58:33

updateByPrimaryKey和updateByPrimaryKeySelective的区别

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl MyBatis Generator概述 MyBatis Generator是一个专门为MyBatis框架使用者定制的代码生成器&#xff0c;它可以快速的根据表生成对应的映射文件、接口文件、POJO。而且&#…...

编程日记 2023/4/26 13:53:32

【ARM Coresight 4 - Rom Table 介紹】

文章目录 1.1 ROM Table1.1.1 Entry 寄存器 1.2 ROM Table 例子 1.1 ROM Table 在一个SoC中&#xff0c;有多个Coresight 组件&#xff0c;但是软件怎么去识别这些 Coresight 组件&#xff0c;去获取这些Coresight 组件的信息了&#xff1f;这个时候&#xff0c;就需要靠 Core…...

编程日记 2023/4/26 13:48:31

11111111

单选题 1、某地上2层的仪表装配厂房&#xff0c;耐火等级二级,每层建筑面积10000m2&#xff0c;该厂 房二层设有800m2的金属零件抛光工段&#xff0c;采用耐火极限为2.00h的防火隔墙与其他区域分隔&#xff0c;该厂房的火灾危险性为( )。 正确答案:B A.甲类 B.乙类 C.丙…...

编程日记 2023/4/26 13:43:29

JavaWeb——TCP协议的相关特性

目录 一、TCP 1、特性 2、确认应答 &#xff08;1&#xff09;、定义 &#xff08;2&#xff09;、原理 &#xff08;3&#xff09;、接收缓冲区 3、超时重传 &#xff08;1&#xff09;、丢包 &#xff08;2&#xff09;、定义 &#xff08;3&#xff09;、分类 二、…...

编程日记 2023/4/26 13:38:27

数据结构（C语言实现）——二叉树的概念及二叉树顺序结构和链式结构的实现（堆排序+TOP-K问题+链式二叉树相关操作）

文章目录 1. 前言2. 树的概念及结构2.1 树的概念2.2 树的相关概念2.3 树的表示 3. 二叉树的概念3.1 特殊二叉树3.2 二叉树的性质 4. 二叉树的顺序存储4.1 堆的概念4.2 堆的实现4.2.1 堆的结点定义4.2.2 堆的打印和销毁4.2.3 堆的插入4.2.4 堆的删除4.2.5 取堆顶数据4.2.6 堆的判…...

编程日记 2023/4/26 13:33:26

OpenShift：关于OpenShift(OKD)通过命令行的方式部署镜像以及S2I流程Demo

写在前面 因为参加考试&#xff0c;会陆续分享一些 OpenShift 的笔记博文内容为安装完 OpenShift, 利用 OpenShift 引擎部署一个镜像应用和一个 S2I 流程部署应用 Demo学习环境为 openshift v3 的版本&#xff0c;有些旧这里如果专门学习 openshift &#xff0c;建议学习 v4 版…...

编程日记 2023/4/26 13:28:24

楔形文字的破解（钉子形文字）【文字破译原理：信息的相关性】

文章目录 引言I 破解楔形文字1.1 贝希斯敦铭文1.2 破解古波斯楔形文字1.3 破解新埃兰楔形文字和巴比伦楔形文字1.4 破解苏美尔楔形文字引言 祖先借助外力走出了非洲，开始了农耕定居的生活，创造能量的水平和能量的使用效率都越来越高；依靠着语言、文字和书写系统，经验、技术…...

编程日记 2023/4/26 13:23:23

【网络安全】文件上传绕过思路

引言 分享一些文件上传绕过的思路&#xff0c;下文内容多包含实战图片&#xff0c;所以打码会非常严重&#xff0c;可多看文字表达&#xff1b;本文仅用于交流学习&#xff0c; 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人…...

编程日记 2023/4/26 13:18:21

MySQL数据库（2）

目录 日期类型的基本使用 timestamp时间戳 修改表 insert基本使用 insert注意事项 update基本使用 update注意事项 delete基本使用 delete注意事项 select基本使用 select练习1 select练习2 select练习3 日期类型的基本使用 timestamp时间戳 在5.7版本使用时间戳需…...

编程日记 2023/6/1 11:38:57

2023年学什么编程语言，最容易找工作？

在众多行业中&#xff0c;程序员属于高薪职业。无论是在国外还是国内&#xff0c;程序员的薪金水平普遍高于其他行业的工作岗位&#xff0c;例如web前端开发、软件工程、游戏开发、APP开发、网络爬虫、网站开发、人工智能开发、网络维护、Java开发、大数据分析、Python开发等工…...

编程日记 2023/4/26 13:08:18

4月23日,今日信息差

1、京东健康皮肤医院正式上线 2、蚂蚁集团再捐1亿元支持内蒙古种树治沙 3、苹果MacBook组装商广达将投资1.2亿美元在越南建电脑制造厂 4、用友与百度签署战略合作协议 5、马斯克&#xff1a;星舰可能在一两个月后准备再次发射 6、格芯起诉IBM 恐波及日本2nm芯片计划 7、河北南部…...

编程日记 2023/4/26 13:03:15

【随笔四】JavaScript 中的 rest

某次开发中&#xff0c;看到项目代码中用到了 rest 这个参数&#xff0c;但又没看到在哪里定义或者传入&#xff0c;当时没太理解它的意思&#xff0c;查了下资料才恍然大悟。含义也很简单&#xff0c;写个随笔记录下。 关键字 rest 的用法&#xff08;剩余参数&#xff09; 在…...

编程日记 2023/4/26 12:58:14

maven作用讲解---以及怎么配置阿里的maven镜像

目录 Maven介绍 传统的java项目的结构和maven的对比 传统 Maven的项目 如何配置阿里 maven 2. 修改 Maven介绍 传统的java项目的结构和maven的对比 传统 Maven的项目 如何配置阿里 maven (1) 把 D:\program\JavaIDEA 2020.2\plugins\maven\lib\maven3\conf\settings.xml…...

编程日记 2023/4/26 12:53:12

NXP公司LPC21xx+热敏电阻实现温度检测

LPC2131/32/34/36/38微控制器基于16位/32位Arm7TDMI-S™CPU&#xff0c;支持实时仿真和嵌入式跟踪&#xff0c;具有尺寸小&#xff0c;功耗低&#xff0c;多个32位定时器、单/双10位8通道ADC、10位DAC、PWM通道、47个GPIO线&#xff08;它们拥有多达9个边沿或电平触发的外部中断…...

编程日记 2023/4/26 12:48:10

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2026/2/8 4:37:08

Spark 之 入门讲解详细版（1）

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

编程新知 2026/2/5 4:17:31

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2026/1/27 17:31:07

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2026/2/7 8:31:55

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2026/1/31 22:59:12

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2026/1/20 17:18:59

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2026/1/28 1:40:03