2022-07-05 vue项目-通用后台管理系统(四) 设置home页侧边栏的icon细节优化:动态绑定图标,自动关闭其他二级菜单,点击折叠和展开侧边栏

element的icon: https://element.eleme.cn/#/zh-CN/component/icon

0.需求

• 现在每个icon都是一样的,
• 然后图标与文字之间的间距是不合理的,需要进行美化:

因为是写死的:<i class="el-icon-location"></i>考虑做成动态绑定相应的图标系统
(如果引入和上述代码还是没有显示出图标,则需要看看在public/index.js中有没有引入在线css和js文件)

• 最后再加上一个"只允许最多打开一个二级菜单"的功能
• 以及实现一个点击后折叠&展开的功能

1.动态绑定相应的图标

原先是写死的:
<i class="el-icon-location"></i>
我们在data声明一个键值对对象(索引:icon名称)

iconObj: {
   
  1: "iconfont icon-user",
  2: "iconfont icon-gengduo",
  3: "iconfont icon-shouye",
  4: "iconfont icon-yanzhengma1",
  5: "iconfont icon-shoucang",
  6: "iconfont icon-fenxiang1",
}

这样,之前使用v-for动态绑定一级菜单和二级菜单的文字的同时,把icon图标也做成动态绑定的,即:写成这样的形式: <i :class="iconObj[item.id]"></i>
同理,二级菜单的icon也照此处理,唯一的区别是:一级菜单使用的是id,二级菜单使用的是菜单文字

• 在data创建对象iconObj2,将菜单文字和element-ui 的icon绑定

iconObj2:{
   
'用户管理':'iconfont icon-Management',
'员工管理':'iconfont icon-quanxianguanli',
'商品管理':'iconfont icon-shangpinguanli',
'订单管理':'iconfont icon-dingdanguanli',
'数据统计':'iconfont icon-shujutongji',
'用户列表':'iconfont icon-yonghuliebiao',
'员工列表':'iconfont icon-role-list',
'权限列表':'iconfont icon-permissions-list',
'商品列表':'iconfont icon-shangpinliebiao',
'分类参数':'iconfont icon-quanbu',
'商品分类':'iconfont icon-fenleigongnengleimu',
}

• 把二级菜单中引入icon的标签改成动态绑定

<!-- 一级菜单下的二级菜单 -->
<!-- <el-menu-item index="1-4"> 改成动态绑定: -->
  <el-menu-item :index="subitem.path" v-for="subitem in item.child" :key="subitem.id">
  <!-- 二级菜单的模板 -->
  <template slot="title">
    <!-- 二级菜单图标 -->
    <!-- <i class="el-icon-fenleigongnengleimu"></i> -->
    <i :class="iconObj2[subitem.name]"></i>
    <!-- 二级菜单文本 -->
    <!-- <span>二级菜单</span> -->
    <span>{
  {subitem.name}}</span>
  </template>
</el-menu-item>

2.遇到的小bug:图标显示不出来

原因:前后引入了不一样的在线css 图标,当时注释了一个,但其实另一个才是代码需要的,
即:你用el-icon-shoucang这样的图标名,它能给你识别出来

<!-- <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3869922_ok78ubh3b5o.css"> -->
<link rel="stylesheet" href="//at.alicdn.com/t/font_2423689_rabjgtavn39.css">

3.微调一下icon和字体的间距

现在是这样的:

设置iconfont的右外边距:

.iconfont {
   
  margin-right: 40px;
}

效果:略

4.实现功能:点开一个其他自动关闭

使用到了unique-opened这个属性:https://element.eleme.cn/#/zh-CN/component/menu#navmenu-dao-hang-cai-dan

添加在el-menu标签中: <el-menu :unique-opened="true">

5.其他小调整

• Aside和Main之间的背景的交接处多了1px的空间 ,需要用css调整下

.el-menu {
   
  border-right: none;
}

<