实际开发中左菜单自定义图标点击切换

实际开发中，左菜单自定义图标点击切换

前言： 该企业项目使用的是ant design for vue

需求：左菜单图标需要进行如下自定义图标的展开和收缩切换：

1、实现该需求历程一

刚开始使用的是menu组件, 代码如下

<a-menu
  mode="inline"
  :default-selected-keys="keyItem"
  :open-keys.sync="sonOpenKeys"
  @click="handleClick"
>
  <a-sub-menu :key="openTit" @titleClick="titleClick">
    <span slot="title" v-if="tit !== 'none'">
      <a-icon :type="sonIconType" />
      <span>{{ tit }}</span>
    </span>
    <!--  -->
    <a-sub-menu
      v-for="firstMenu in haveChild"
      :key="firstMenu.id + '*' + firstMenu.url + '*' + firstMenu.name"
      @titleClick="titleClick"
    >
      <span slot="title">
        <a-icon :type="firstMenu.icon" />
        <span>{{ firstMenu.name}}</span>
      </span>
      <!--  -->
      <a-menu-item
        v-for="item in firstMenu.children"
        @titleClick="titleClick"
        :key="item.id + '*' + item.url + '*' + item.name"
      >
        {{ item.name}}
      </a-menu-item>
    </a-sub-menu>
    <a-menu-item
      v-for="firstMenu in noHaveChild"
      :key="firstMenu.id + '*' + firstMenu.url + '*' + firstMenu.name"
      @titleClick="titleClick"
    >
      {{ firstMenu.name}}
    </a-menu-item>
  </a-sub-menu>
</a-menu>

注意 ：使用menu组件有如下bug

1. 如果左菜单层级数是知道的，且最多2-3级，虽然可以实现自定义图标的点击切换，但是当用户点击过快，会出现意想不到的bug，且排查困难
2. 如果左菜单层级不知道a-sub-menu和a-menu-item不好遍历，数据处理困难

2、实现该需求历程2

这次使用的是a-tree组件，代码如下

<a-tree
    class="draggable-tree"
    :default-expanded-keys="expandedKeys"
    draggable
    :tree-data="gData"
    @dragenter="onDragEnter"
    @drop="onDrop"
  />

注意 ： 使用tree的缺点如下

1. 虽然tree不用考虑左菜单的遍历层级，组件底层会帮我们实现深度遍历，但是，tree组件自定义可切换图标需要使用递归进行数据处理（加slots属性），实现困难，且不灵活，性能不高
2. 隐藏潜在交互bug
3. 如果是a-tree，就只能点击图标进行收缩展开（不能点击文字），如果是a-directory-tree可以点击文字切换收缩展开，但是就不能自定义切换图标了

关于：ant design vue的menu或者tree组件 实现手风琴模式，比较麻烦

3、实现该需求历程三

这次使用的是element ui的tree组件,代码如下

<el-tree
  :data="data"
  :props="defaultProps"
  accordion
  @node-click="handleNodeClick">
</el-tree>

实现自定义图标展开收缩切换的代码如下

<style>
/* // 树形列表  */
.el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
/* //有子节点 且未展开  */
.el-tree .el-icon-caret-right:before {
  background: url("../assets/img/add-icon.png") no-repeat 0 3px;
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  font-size: 16px;
  background-size: 16px;
}

/* //有子节点 且已展开  */
.el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
  background: url("../assets/img/jian-icon.png") no-repeat 0 3px;
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  font-size: 16px;
  background-size: 16px;
}

/* //没有子节点 */
.el-tree .el-tree-node__expand-icon.is-leaf::before {
  background: transparent no-repeat 0 3px;
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  font-size: 16px;
  background-size: 16px;
}
</style>

注意 ： 使用element ui的tree组件优点如下：

1. 既可以点击自定义图标，又可以点击节点文字，进行展开收缩切换；
2. 同样不需要考虑数据层次；
3. 省去代码层的遍历，提高性能；
4. 自定义图标的切换使用的是css层实现
5. 图标使用的是图变，不再是icon，图标可变性提高