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

news2025/5/18 8:31:06

背景：

在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;
        }
    }
}