自定义侧边栏

路径: /src/components/SideNavMenu/main.vue

<!-- 自定义侧边栏   部分功能请自行完善 -->
<template>
  <div class="gd-app gd-app-customize">
    <template v-for="(item, index) in defMenus">
      <div class="app-item" :key="item.code" @click="selApp(item.code)">
        <i :class="item.icon" class="gd-icons" />
        <div class="pname line1" v-if="!sidebar">
          {{ $i18nt(`Dynamics.${item.transkey}`, item.name) }}
        </div>
        <i v-if="item.children && item.children.length > 0" :class="openKey.includes(item.code) ? 'el-icon-arrow-down' : 'el-icon-arrow-right'" />
      </div>
      <template v-if="openKey.includes(item.code)">
        <div class="app-item-children" v-if="item.children && item.children.length > 0">
          <div v-for="ite in item.children" :key="ite.key">
            <div class="item" v-if="!ite.hidden && ite.show">
              <!-- 菜单 -->
              <div class="item-menu" v-if="ite.type == 1" @click="$emit('selectMenus', ite.key)">
                <i :class="ite.icon" class="gd-icons" />
                <div class="pname line1">
                  {{ $i18nt(`Dynamics.${ite.transkey}`, ite.meta.title) }}
                </div>
              </div>
              <!-- 目录 -->
              <template v-else>
                <div class="item-catalog">
                  <div class="item-menu item-menu-catalog">
                    <i :class="ite.icon" class="gd-icons" />
                    <div class="pname line1">
                      {{ $i18nt(`Dynamics.${ite.transkey}`, ite.meta.title) }}
                    </div>
                  </div>
                  <template v-if="ite.children && ite.children.length > 0">
                    <div v-for="its in ite.children" :key="its.key" class="more">
                      <div class="item-menu" @click="$emit('selectMenus', its.key)">
                        <i :class="its.icon" class="gd-icons" />
                        <div class="pname line1">
                          {{ $i18nt(`Dynamics.${its.transkey}`, its.meta.title) }}
                        </div>
                      </div>
                    </div>
                  </template>
                </div>
              </template>
            </div>
          </div>
        </div>
      </template>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    //导航基本属性
    basicAttribute: {
      type: Object,
      default: () => {}
    },
    //应用及菜单
    defMenus: {
      type: Array,
      default: () => []
    },
    //当前菜单所属应用code
    defApp: {
      type: String,
      default: ''
    },
    //菜单收缩状态
    sidebar: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      openKey: ['ufqqiqvl']
    };
  },
  methods: {
    selApp(e) {
      const items = this.openKey.filter((ite) => ite === e)[0];
      if (items) {
        this.openKey = this.openKey.filter((ite) => ite !== e);
      } else {
        this.openKey.push(e);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.gd-app-customize {
  padding: 12px 16px;
  .app-item {
    display: flex;
    align-items: center;
    justify-items: center;
    background: #eff6ff;
    margin-bottom: 6px;
    border-radius: 4px;
    padding: 6px 6px;
    cursor: pointer;
    .gd-icons {
      padding-right: 6px;
    }
    .pname {
      flex: 1;
      overflow: hidden;
    }
  }
  .app-item-children {
    .item {
      .item-menu {
        display: flex;
        align-items: center;
        justify-items: center;
        margin-bottom: 6px;
        padding: 6px 6px;
        cursor: pointer;
        .pname {
          flex: 1;
          overflow: hidden;
          font-size: 12px;
          padding-right: 6px;
        }
      }
      .item-catalog {
        margin-left: 12px;
        .item-menu-catalog {
          background: #eee;
          border-radius: 4px;
        }
        .more {
          margin-left: 12px;
        }
      }
    }
  }
}
</style>