menuHide.vue

<template>
  <div>
    <!-- <div v-if="btnCtrl.indexOf('clueDiscovery')>-1?true:false">
            <clue-btn></clue-btn>
        </div>
        <div v-if="btnCtrl.indexOf('protectionFile')>-1?true:false">
            <protect-file-btn></protect-file-btn>
        </div>
        <div v-if="btnCtrl.indexOf('projectManage')>-1?true:false">
            <add-project-btn></add-project-btn>
        </div> -->
    <div v-for="(item, index) in menuList" :key="index">
      <Dropdown
        :key="item.id"
        transfer
        placement="right-start"
        @on-click="changeMenu"
      >
        <div
          v-if="item.childList"
          :class="['hover-icon', item.id == activeId ? 'selectedIcon' : '']"
        >
          <i :class="item.menuLogo" :style="[{ fontSize: '20px' }]"></i>
        </div>
        <DropdownMenu v-if="item.childList" slot="list">
          <template v-for="(child, i) in item.childList">
            <DropdownItem
              v-if="!!!child.hasChildList"
              :key="child.id"
              :name="child.href"
              :selected="child.href == $route.path"
            ><span style="padding-left: 10px">{{
              child.name
            }}</span></DropdownItem>
            <Dropdown
              v-if="!!child.hasChildList"
              :key="child.id"
              transfer
              placement="right-start"
            >
              <DropdownItem
                style="width: 200px"
                :selected="child.href == $route.path"
              >
                <span style="padding-left: 10px">{{ child.name
                }}<Icon
                  style="position: absolute; right: 15px; top: 10px"
                  type="ios-arrow-forward"
                /></span>
              </DropdownItem>
              <DropdownMenu slot="list">
                <template v-for="third in child.childList">
                  <DropdownItem
                    :key="third.id"
                    :name="third.href"
                    :selected="child.href == $route.path"
                  >
                    <span style="padding-left: 10px">{{ third.name }}</span>
                  </DropdownItem>
                </template>
              </DropdownMenu>
            </Dropdown>
          </template>
        </DropdownMenu>
        <Tooltip v-else transfer placement="right">
          <div
            :class="['hover-icon', item.id == activeId ? 'selectedIcon' : '']"
          >
            <i
              :class="item.menuLogo"
              style="font-size: 20px"
              @click="changeMenuTool(item.href)"
            ></i>
          </div>
          <div slot="content">
            {{ item.name }}
            <Badge
              v-if="item.hasBadge"
              :count="$store.state.unauditedTask"
            />
          </div>
        </Tooltip>
      </Dropdown>
    </div>
  </div>
</template>
<script>
// import clueBtn from '../../view/case/clueDiscovery/clueBtn/clueBtn';
// import protectFileBtn from '@/view/project/protectionFile/protectFileBtn/protectFileBtn';
// import addProjectBtn from '@/view/project/projectManage/addProjectBtn/addProjectBtn';
export default {
  name: 'MenuShrink',
  components: {
    // clueBtn,
    // protectFileBtn,
    // addProjectBtn
  },
  props: ['menuList'],
  data() {
    return {
      btnCtrl: '',
      activeId: ''
    }
  },
  computed: {
    openTagMenu() {
      return this.$store.getters.openTagMenu
    }
  },
  watch: {
    $route(to, from) {
      this.btnCtrl = to.fullPath
      this.getActiveId(this.openTagMenu.menuList)
      this.addItem()
    }
  },
  mounted() {
    this.btnCtrl = this.$route.path
    this.getActiveId(this.menuList)
  },
  methods: {
    changeMenu(active) {
      console.log('changeMenu：', active)
      this.$router.push({
        path: active
      })
    },
    changeMenuTool(href) {
      console.log('changeMenuTool', href)
      this.$router.push({
        path: href
      })
    },
    getActiveId(arr, parentId) {
      if (!arr) {
        return
      }
      arr.forEach((item, index) => {
        if (item.childList) {
          this.getActiveId(item.childList, item.parentId)
        }
        if (item.href && item.href == this.$route.path) {
          this.activeId = parentId ? item.parentId : item.id
        }
      })
    },
    // tag页签
    addItem() {
      const path = this.$route.fullPath
      const name = this.$route.meta.name
      const type = this.$route.meta.type
      const tagMenuPathArr = this.openTagMenu.tagMenuPathArr
      const tagMenuArr = this.openTagMenu.tagMenuArr
      if (tagMenuPathArr.indexOf(path) == -1 && type == '菜单') {
        tagMenuArr.push({ path: path, name: name })
        tagMenuPathArr.push(path)
        this.$store.commit('openTagMenu', {
          tagMenuArr: tagMenuArr,
          tagMenuPathArr: tagMenuPathArr
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "./../../assets/globalStyle.scss";
.hover-icon {
  width: 50px;
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
}
.selectedIcon {
  background: #dfe5ed;
  i {
    color: $globalMainColor;
  }
}
</style>