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

css iconfont图标样式修改，js 点击后更改样式

news 来源：原创 2025/5/14 8:06:58

背景：

在vue项目中，通过点击/鼠标覆盖，更改选中元素的样式，可以通过js逻辑，也可以根据css样式修改。包括以下内容：iconfont图标的引入以及使用，iconfont图标样式修改【导入文件是纯白，改为蓝色渐变】

效果展示：

核心代码：

:class="{ sideActive: store.currentRouterName === item.name }">

一、布局html

//html
<el-aside v-if="store.slideList.length > 1"><el-menu :unique-opened="true" @select="handleSelect"><BsSide v-for="(slideItem, index) in store.slideList" :key="index" :item="slideItem" /></el-menu></el-aside>
//<BsSide>封装
<template><router-link :to="{ name: item.path }" custom v-slot="{ navigate }" v-if="!item.children && item.orderNum != 0"><el-menu-item :index="item ? item.orderNum + '' : ''" style="padding: 0" @mouseenter="sideMenu(item, navigate)"@click="item.componentLink && changeMenu(item)" v-if="!item.isMeun"><div v-if="item.isOwnMeun" class="side-item no-user-select":class="{ sideActive: store.currentRouterName === item.name }"><div class="iconImg"><div class="iconfont" :class="item.icon"></div></div><span>{{ item.orderName }}</span></div><div v-if="item.subMenu && item.name == store.currentRouterName && data.isOpenMenu" class="sub-menu-box"><div class="sub-menu no-user-select"><div class="content" v-for="(menuItem, index) in item.subMenu" :key="index":class="{ activeMenu: store.menuName == menuItem.name || store.isMeunComponent.name == menuItem.name }"@click.stop="changeMenu(menuItem)"><div class="iconImg"><div class="iconfont ico-img" :class="menuItem.icon"></div></div><div>{{ menuItem.text }}</div></div></div><div class="modal" @mouseenter="data.isOpenMenu = false"></div></div></el-menu-item></router-link>
</template>

通过动态添加选中样式class此处名为【sideActive】

二、样式css

默认渐变样式：

默认渐变样式通过设置iconfont图标的background-image样式+color:transparent【透明】实现，默认样式。

//iconfont图标颜色渐变
.iconfont {width: 100%;height: 40px;background-image: linear-gradient(180deg, #4CDFFF 0%, #FFFFFF 100%);-webkit-background-clip: text;color: transparent;
}

动态样式：

通过js判断是否满足条件，如果条件为true，则动态加上选中样式此处命名为【sideActive】

//选中样式
.sideActive {border: none;border-bottom: 2px solid;// color: #FFEEA8;border-image: linear-gradient(90deg, rgba(19, 69, 117, 0), rgba(255, 238, 168, 1), rgba(19, 69, 117, 0)) 2 2;.iconfont {// background-image: linear-gradient(180deg, #4CDFFF 0%, #FFFFFF 100%);// -webkit-background-clip: text;color: #ffffff;}
}

写到这儿就实现了。。。

其它：

图标位置不是水平垂直，通过css修改样式

如果图标不是位于正中心，可以通过样式穿透实现样式的调整，这是我的，可以参考一下：

<style lang="scss" scoped>
:deep(.el-container) {height: 100%;width: 100%;position: relative;.el-header {--el-header-padding: 0;--el-header-height: auto;}.el-main {height: 100%;width: 100%;--el-main-padding: 0px;position: relative;overflow: hidden;}.el-aside {box-sizing: border-box;padding-top: 8px;width: 101px;font-size: 16px;background: #014467;position: relative;overflow: visible;.el-menu {background: none;border: none;.el-menu-item {font-size: 16px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;color: rgba(255, 255, 255, 0.8);line-height: 20px;height: 90px;justify-content: center;border-top: 2px solid transparent;border-bottom: 2px solid rgba(35, 164, 192, 0.38);.side-item {height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;
//图标垂直居中div {font-size: 30px;height: 40px;display: flex;justify-content: center;align-items: center;}}}.el-menu-item:hover {background: none;}}
}