jonhon-mes-web/src/page/index/sidebar/index.vue

<template>
  <el-menu unique-opened :default-active="activeMenu" :mode="setting.sidebar" :collapse="isCollapse"
    v-if="setting.styleRadio == '1'">
    <sidebar-item :menu="menu"></sidebar-item>
  </el-menu>
  <left-menu :menulist="menu" v-if="setting.styleRadio == '2'"></left-menu>
  <div style="display: flex;" v-if="setting.styleRadio == '3'">
    <div :class="leftMenu.find(item => item.children) ? 'children' : 'no_child'">
      <div class="left_menu" @click="clickItem(item, index)" v-for="(item, index) in leftMenu" :key="item.id"
        :class="index == selectIndex ? 'active' : ''">
        <div class="left_menu_item">
          <i :class="item.source" style="margin-bottom: 5px;"></i>
          {{ item.name }}
        </div>
      </div>
    </div>
    <div style="flex: 1;">
      <div
        v-if="leftMenu && leftMenu.length != 0 && leftMenu[selectIndex].children && leftMenu[selectIndex].children.length != 0">
        <div class="left_top">{{ leftMenu[selectIndex].name }} </div>
        <div class="right_menu" v-for="item in leftMenu[selectIndex].children" :key="item.id">
          <div class="right_menu_item">
            <el-popover placement="right-start" :show-arrow="false" :offset="0" :hide-after='0'
              popper-class="log-popover"
              popper-style="visibility: visible;width:auto;border:none;  transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;">
              <template #reference>
                <div class="right_menu_item_box" @click='clickPage(item)'>
                  <div>{{ item.name }}</div>
                  <el-icon>
                    <ArrowRight />
                  </el-icon>
                </div>
              </template>
              <template #default v-if="item.children && item.children.length != 0">
                <div class="third_box" v-if="item.children && item.children.length != 0">
                  <div class="third_box_item" v-for="third in item.children" :key="third.id">
                    {{ third.name }}
                  </div>
                </div>
              </template>
            </el-popover>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import sidebarItem from './sidebarItem.vue';
import { setStore, getStore } from '@/utils/store';
import leftMenu from './leftMenu.vue';

export default {
  name: 'sidebar',
  components: { sidebarItem, leftMenu },
  data() {
    return {
      isCollapse: false,
      // selectIndex:0
    }
  },
  inject: ['index'],
  computed: {
    ...mapGetters(['isHorizontal', 'setting', 'menu', 'tag', 'isCollapse', 'menuId', 'leftMenu', 'activeIndex', 'selectedIndex', 'selectIndex']),
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
  },
  mounted() {
    if(this.setting.styleRadio=='3'){
      this.index.openMenu2();
    }else{
      this.index.openMenu();
    }
    
    console.log(8888,leftMenu)
  },
  methods: {
    clickItem(item, index) {
      if (!item.children) {
        this.$router.push({
          path: item.path,
          query: item.query,
        });
      }
      this.$store.commit('SET_SELECTED_INDEX', item.id + '');
      this.$store.commit('SET_SELECT_INDEX', index);
      // this.selectIndex = index
    },
    clickPage(item) {
      if (!item.children) {
        this.$router.push({
          path: item.path,
          query: item.query,
        });
      }
    }
  },

};
</script>
<style lang="scss" scoped>
.no_child {
  width: 185px;
}

.children {
  width: 60px;
}

.left_menu {
  width: 100%;
  background: #f7fafc;
  color: #41a5ff;
  display: flex;
  align-items: center;
  justify-content: center;

  &.active {
    background: #41a5ff;
    color: #fff;
  }

  .left_menu_item {
    cursor: pointer;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 500;
    color: var(--header-bkColor-hover);
    text-align: center;
    width: 60px;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &:hover {
      background: #0066ff;
      color: #fff;
    }
  }
}

.left_top {
  font-size: 14px;
  font-family: Microsoft YaHei-Bold, Microsoft YaHei;
  font-weight: 700;
  text-align: center;
  height: 48px;
  display: flex;
  color: #5a6f82;
  align-items: center;
  justify-content: center;
}

.right_menu {
  flex: 1;
  display: flex;
  flex-direction: column;



  .right_menu_item {
    width: 100%;
    height: 46px;
    // color: var(--header-fontColor);
    // font-size: 14px;
    // line-height: 46px;
    // cursor: pointer;
    // padding: 0 10px;
    // box-sizing: border-box;
    // overflow: hidden;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    // position: relative;

    .right_menu_item_box {
      font-size: 14px;
      line-height: 46px;
      cursor: pointer;
      padding: 0 10px;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;

      &:hover {
        background: #0066ff;
        color: #fff;
      }
    }


  }

}
</style>
<style lang="scss">
.third_box {
  display: flex;
  flex-direction: column;
  // flex-wrap: wrap;
  overflow-y: auto;
  max-width: calc(100vw - 500px) !important;
  max-height: calc(100vh - 200px);

  .third_box_item {
    min-width: 140px;
    color: #5a6f82;
    text-align: left;
    font-size: 14px;
    line-height: 46px;
    /* background: var(--header-bkColor); */
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    font-weight: bolder;
    word-break: keep-all;
    white-space: nowrap;
    box-sizing: border-box;
  }
}

.log-popover {
  border: none;
}
</style>