Elementplus淡入淡出效果，头部顶栏如何设置文字隐藏效果,默认图标如何收缩,icons如何通过类进行替换，侧边栏如何添加阴影，右边如何设置高度，侧边栏如何设置阴影，如何让icon与文字-阿里云开发者社区

Elementplus淡入淡出效果，头部顶栏如何设置文字隐藏效果,默认图标如何收缩,icons如何通过类进行替换，侧边栏如何添加阴影，右边如何设置高度，侧边栏如何设置阴影，如何让icon与文字

2024-07-04 32

版权

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

简介： Elementplus淡入淡出效果，头部顶栏如何设置文字隐藏效果,默认图标如何收缩,icons如何通过类进行替换，侧边栏如何添加阴影，右边如何设置高度，侧边栏如何设置阴影，如何让icon与文字

参考资料：

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

淡入淡出效果

代码写法：

自己定义一个动画效果，定义一个类logo-title

写一个class的类

完整写法，div这里style样式可以去掉

.logo-title {
  margin-left: 5px;
  font-size: 20px;
  transition: all .3s;  
}

默认有一个图标，这里设置一个图标

<el-icon style="width: 26px;" @click="handleCollapse"><Fold /></el-icon>
<script setup>
import {
    Fold
} from '@element-plus/icons-vue'
 
 
</script>

icons如何通过类进行替换

面包屑效果的设置：

<el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
    <el-breadcrumb-item
      ><a href="/">promotion management</a></el-breadcrumb-item
    >
    <el-breadcrumb-item>promotion list</el-breadcrumb-item>
    <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
  </el-breadcrumb>

添加阴影部分

.el-aside {
  transition: width .3s;
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
}

侧边栏如何设置阴影：

.el-header {
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
}

el-header如何使文字和icon在一侧，要添加一个flex布局

.el-aside div span {
  font-size: 14px;
  font-family: "Times New Roman", Times, serif;
  font-weight: 700;
}

文章标签：

JavaScript