vue鼠标移入添加class样式,鼠标移出去除样式(active)

本文介绍了一种使用JavaScript在鼠标移入元素时动态添加或移除特定Class的方法。通过HTML绑定mouseover和mouseout事件实现对元素Class的动态管理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

鼠标移入添加class样式

HTML

HTML绑定事件,加入或者移出class为active

这里写图片描述

<div class="col-lg-3 col-xs-6 paddingLeft com_marginBtm10 choosePlan" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)">
   流量套餐
</div>

JS

这里除了active这个class需要动态添加或者减去,其他的皆是移入移出都需要的class

这里写图片描述

methods:{
      changeActive($event){
             $event.currentTarget.className="col-lg-3 col-xs-6 paddingLeft com_marginBtm10 choosePlan active";
      },
      removeActive($event){
             $event.currentTarget.className="col-lg-3 col-xs-6 paddingLeft com_marginBtm10 choosePlan";
      }
},
这是一段 代码,其中有一个功能,将鼠标放到导航栏时,会弹出显示全部,移动出来时,会缩回去,这个功能去掉,我不想要了,以下是代码<template> <div class="app-container"> <!-- 导航标题 --> <div class="nav-header"> <h3>iiot</h3> </div> <!-- 主布局 --> <div class="main-layout"> <!-- 左侧导航栏 --> <div class="left-nav" @mouseenter="isCollapse = false" @mouseleave="isCollapse = true" > <el-menu default-active="2" class="custom-menu" :collapse="isCollapse" @open="handleOpen" @close="handleClose" background-color="#1a2b4a" text-color="#d7e3ff" active-text-color="#409EFF" :unique-opened="true" router > <el-sub-menu index="1"> <template #title> <el-icon><Document /></el-icon> <span>任务管理</span> </template> <el-menu-item-group> <el-menu-item index="/taskList">调度任务</el-menu-item> <el-menu-item index="/taskType">任务编辑</el-menu-item> <el-menu-item index="/commandSet">指令编辑</el-menu-item> <el-menu-item index="/log-types">任务日志</el-menu-item> </el-menu-item-group> </el-sub-menu> <el-sub-menu index="2"> <template #title> <el-icon><Files /></el-icon> <span>大屏展示</span> </template> <el-menu-item-group> <el-menu-item index="display_all">总览</el-menu-item> <el-menu-item index="device_status">设备状态</el-menu-item> <el-menu-item index="warehouse_status">仓库状态</el-menu-item> <el-menu-item index="task_status">任务状态</el-menu-item> </el-menu-item-group> </el-sub-menu> <el-sub-menu index="3"> <template #title> <el-icon><Notebook /></el-icon> <span>库位管理</span> </template> <el-menu-item-group> <el-menu-item index="/warehouse">库位管理</el-menu-item> <el-menu-item index="/station">站点管理</el-menu-item> </el-menu-item-group> </el-sub-menu> <el-sub-menu index="4"> <template #title> <el-icon><Setting /></el-icon> <span>配置模块</span> </template> <el-menu-item-group> <el-menu-item index="4-1">设备管理</el-menu-item> <el-menu-item index="4-2">变量管理</el-menu-item> <el-menu-item index="4-5">路径管理</el-menu-item> <el-menu-item index="4-6">管控区域</el-menu-item> </el-menu-item-group> </el-sub-menu> </el-menu> <!-- 移除折叠按钮 --> </div> <!-- 右侧内容区 --> <div class="right-content"> <router-view> </router-view> </div> </div> </div> </template> <script lang="ts" setup> import { ref } from "vue"; import { Document, Notebook, Files, Setting } from "@element-plus/icons-vue"; const isCollapse = ref(true); const handleOpen = (key: string, keyPath: string[]) => { console.log(key, keyPath); }; const handleClose = (key: string, keyPath: string[]) => { console.log(key, keyPath); }; </script> <style> /* 全局样式重置 */ body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; } /* 确保所有元素使用border-box */ *, *::before, *::after { box-sizing: border-box; } </style> <style scoped> .app-container { width: 100vw; height: 100vh; margin: 0; padding: 0; display: flex; flex-direction: column; background-color: #ffffff; overflow: hidden; } .nav-header { padding: 12px 15px; display: flex; align-items: center; background-color: #152238; border-bottom: 0px solid #000000; flex-shrink: 0; } .left-nav { height: 100%; display: flex; flex-direction: column; min-width: 64px; /* 折叠状态的最小宽度 */ transition: all 0.3s ease; } .nav-header h3 { margin: 0; font-size: 22px; color: #d7e3ff; font-weight: 600; margin-left: 10px; } .main-layout { display: flex; flex: 1; overflow: hidden; min-width: 0; /* 防止flex项目溢出 */ } .right-content { flex: 1; height: 100%; background-color: #f0f2f5; overflow: auto; padding: 0px; } .custom-menu { border-right: none; flex: 1; } .custom-menu:not(.el-menu--collapse) { width: 200px; } /* 调整菜单项样式 */ .custom-menu .el-menu-item, .custom-menu .el-sub-menu__title { height: 50px; line-height: 50px; } /* 调整图标和文字的间距 */ .custom-menu .el-icon { margin-right: 8px; } </style>
最新发布
08-13
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值