阿里icon 及侧边收缩
1.阿里图标添加
选择合适的阿里图标到我的项目
选择到项目后,点击font class 将下面的代码复制到public的index.html中,这里新添加图标后,这行css可能会变更,记得同步到项目中
选择合适的icon,复制代码即可使用
在项目中使用也很简单,如下即可
<i class='iconfont icon-sucaiku'></i>
例如我们在前面一节看到的 在路由管理里面的meta里面填的icon实际上就是这里的几个图标,具体渲染也见前面一节。
<i class="iconfont" :class="item.meta.icon"></i>
2.侧边收缩
实际上在el-menu里面提供了一个属性,collapse,这个属性可以实现侧边的收缩,但是我们需要在其兄弟组件(header.vue)
里面实现对其控制,这里我们套用一下状态管理
- 首先是在el-menu里加上属性
<el-menu
active-text-color="#ffd04b"
background-color="#545c64"
class="layout-menu system-scrollbar"
text-color="#fff"
:collapse="isCollapse"
:default-active='activeMenu'
router
>
.......
</el-menu>
- 接着我们在store里面把collapse的状态折腾起来
这里我们把后台的状态部门拆分出来 叫做app.js,新建在store–>modules–>app.js
代码如下:
export de