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

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

news 2026/2/9 19:38: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

R语言AI模型部署方案：精准离线运行详解

R语言AI模型部署方案：精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案，实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点： 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

编程新知 2025/12/6 1:56:35

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2026/1/23 7:23:58

Python：操作 Excel 折叠

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

编程新知 2026/1/30 20:05:06

第一篇：Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

编程新知 2026/1/31 3:30:33

多模态大语言模型arxiv论文略读（108）

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

编程新知 2026/2/1 6:11:51

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2025/10/14 6:46:13

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/11/3 0:44:41

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/11/19 6:04:18

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）

本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...

编程新知 2026/1/25 3:29:22

C++.OpenGL （20/64）混合（Blending）

混合（Blending） 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...

编程新知 2026/1/20 5:33:17