ELEMENT-PLUES如何设计二级高亮样式，文字如何呈现高亮效果，如果字体出现不对齐的情况，侧边栏icon如何调位置，目录如何折叠，如何延迟动画播放，如何添加阴影，如何添加logo，在行内样式写宽-阿里云开发者社区

ELEMENT-PLUES如何设计二级高亮样式，文字如何呈现高亮效果，如果字体出现不对齐的情况，侧边栏icon如何调位置，目录如何折叠，如何延迟动画播放，如何添加阴影，如何添加logo，在行内样式写宽

2024-07-04 18

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： ELEMENT-PLUES如何设计二级高亮样式，文字如何呈现高亮效果，如果字体出现不对齐的情况，侧边栏icon如何调位置，目录如何折叠，如何延迟动画播放，如何添加阴影，如何添加logo，在行内样式写宽

参考资料：

【带小白做毕设】6. Vue管理系统速成_哔哩哔哩_bilibili

设置高亮的样式写法是这样写的：

<template>
    <div>
        <el-container>
            <el-aside style="width: 200px;min-height: 100vh;background-color:#001529">
                <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center;">
                    logo
                </div>
                <el-menu style="border:none" background-color="#001529" text-color="rgba(255,255,255,0.65)"
                    default-active="$router.path">
                    <el-menu-item index="/">
                        <template #title>
                            <el-icon>
                                <House />
                            </el-icon>
                            <span>系统首页</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item>系统首页</el-menu-item>
                    <el-menu-item>系统首页</el-menu-item>
                    <el-sub-menu index="1-4">
                        <template #title>
                            <el-icon>
                                <Menu />
                            </el-icon>
                            <span>信息管理</span>
                        </template>
                        <el-menu-item index="1-4-1">用户信息</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
 
        </el-container>
    </div>
</template>
<style scoped>
.el-menu--inline .el-menu-item {
    background-color: #000c17 !important;
}
</style>

如何设置高亮效果

样式写成这样就行

.el-menu-item:hover {
    color: #fff;
}

如果二级标题和图标也想要发生改变，添加这段代码就行了

.el-menu-item:hover,
.el-sub-menu__title:hover span {
    color: #fff !important;
}
 
.el-sub-menu__title:hover i {
    color: #fff !important;
}

如果二级标题想要点击之后改变颜色，填这种样式就好了

.el-menu-item.is-active {
    background-color: #40a9ff !important;
    color: #fff;
    border-radius: 5px !important;
}

如果要修正长度

用这个代码就行

.el-menu-item {
    height: 40px !important;
    line-height: 40px !important;
}
 
.el-submenu__title {
    height: 40px !important;
    line-height: 40px !important;
}

如果出现不对齐的情况

设置图标位置，点击三角符号

折叠水平菜单，用collapse

在el-menu中添加isCollapse,同时在data中定义字符串

这里:collapse=xxx要设置，data中也要设置

<el-menu :collapse="isCollapse" style="border:none" background-color="#001529"
                    text-color="rgba(255,255,255,0.65)" default-active="$router.path">
 </el-menu>
<script lang="ts">
export default {
    name: 'HomeView',
    data() {
        return {
            isCollapse: true
        }
    }
}
</script>

写成这样就出现了折叠效果的初步形状了

这里width不能写死，在el-aside中添加 :width="asideWidth"

<el-aside :width="asideWidth" style="min-height: 100vh;background-color:#001529">

<script lang="ts">
export default {
    name: 'HomeView',
    data() {
        return {
            isCollapse: true,
            asideWidth: '200px'
        }
    }
}
</script>

这里要在头部添加一个标签

头部要有一个icon

绑定事件，@click="handleCollapse"

改成

.el-aside {

transition:width .3s;

}

.el-aside {
    transition: width .30s;
}

伸缩图标如何做，这里图标消失不见了，该怎样设置

写成这样就行了

        <el-menu-item index="/">
                        <el-icon>
                            <House />
                        </el-icon>
                        <span>系统首页</span>
                    </el-menu-item>

效果

添加阴影

在.el-aside和.el-header中添加

如何添加logo，可以利用行内样式直接填，再结合F12，设置宽度

 <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center;">
    <img src="@/assets/logo.png" style="width: 40px;height: 40px;">
</div>

文章标签：

JavaScript