menuShow.vue

<template>
  <Menu
    ref="leftMenu"
    width="auto"
    style="overflow: auto"
    :replace="true"
    :active-name="menu.active"
    :theme="layout.theme2"
    :open-names="menu.open"
    :accordion="true"
    @on-select="onSelect"
    @on-open-change="onOpenChange"
  >
    <!-- <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> -->
    <template v-for="item in menuList">
      <MenuItem
        v-if="!!!item.hasChildList"
        :key="item.id"
        :name="item.href"
        :to="item.href"
      >
        <span :key="item.id" class="layout-text">
          <i :class="item.menuLogo" :style="[{ fontSize: '14px' }]"></i>
          {{ item.name }}
          <Badge
            v-if="item.hasBadge"
            :count="$store.state[item.hasBadge]"
            class-name="badge-style"
          />
        </span>
      </MenuItem>
      <Submenu v-if="!!item.hasChildList" :key="item.id" :name="item.name">
        <template slot="title">
          <span class="layout-text">
            <i :class="item.menuLogo" :style="[{ fontSize: '14px' }]"></i>
            {{ item.name }}
          </span>
        </template>
        <template v-for="list in item.childList">
          <MenuItem
            v-if="!!!list.hasChildList"
            :key="list.id"
            :name="list.href"
            :to="list.href"
          >
            <span class="layout-text">
              {{ list.name }}
              <Badge
                v-if="list.hasBadge"
                :count="$store.state[list.hasBadge]"
                class-name="badge-style"
              />
            </span>
          </MenuItem>
          <Submenu v-if="!!list.hasChildList" :key="list.id" :name="list.name">
            <template slot="title">
              {{ list.name }}
            </template>
            <MenuItem
              v-for="third in list.childList"
              :key="third.id"
              :name="third.href"
              :to="third.href"
            >{{ third.name }}</MenuItem>
          </Submenu>
        </template>
      </Submenu>
    </template>
  </Menu>
</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 {
  components: {
    // clueBtn,
    // protectFileBtn,
    // addProjectBtn
  },
  props: ['menuList'],
  data() {
    return {
      collapsed: false,
      menu: {
        open: [this.$route.matched[0].name], // 展开的 Submenu 的 name 集合
        active: this.$route.path // 激活菜单的 name 值
      },
      layout: {
        theme2: 'light' // 菜单主题
      },
      btnCtrl: ''
    }
  },
  computed: {
    openTagMenu() {
      return this.$store.getters.openTagMenu
    }
  },
  watch: {
    $route(to, from) {
      this.btnCtrl = to.fullPath
      this.addItem()
      this.fnMenuChange()
    }
  },
  mounted: function () {
    this.btnCtrl = this.$route.path
    this.fnMenuChange()
    // console.log(this.menuList)
  },
  methods: {
    onSelect(name) {
      /* console.log("onSelect");
      console.log(name); */
    },
    onOpenChange(name) {
      /* console.log("onOpenChange");
      console.log(name); */
    },
    /* 激活菜单 */
    fnMenuChange() {
      this.menu.open = []
      this.$route.matched.forEach((item, index) => {
        if (index <= this.$route.matched.length - 1) {
          this.menu.open.push(item.name)
        }
      })
      const n = this.nthIndexOf(this.$route.path, '/')
      if (n > 0) {
        this.menu.active = this.$route.path.slice(0, n)
        // this.menu.active = this.$route.path.slice(0, "/", 3);
      } else {
        this.menu.active = this.$route.path
      }
      this.$nextTick(function () {
        this.$refs.leftMenu.updateOpened() // 手动更新展开的子目录
        this.$refs.leftMenu.updateActiveName() // 手动更新当前选择项
      })
    },
    nthIndexOf(str, c /* , n */) {
      let n = 0
      str.split('').forEach((item) => {
        if (item === c) n++
      })
      var x = str.indexOf(c)
      for (var i = 0; i < n; i++) {
        x = str.indexOf(c, x + 1)
      }
      return x
    },
    // 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>
.layout-text {
  i {
    margin-right: 8px;
  }
  display: inline-block;
  width: 123px;
}
</style>

<style>
.ivu-menu {
  font-size: 12px;
}
.ivu-menu-item {
  font-size: 12px;
}
.ivu-menu-vertical .ivu-menu-item,
.ivu-menu-vertical .ivu-menu-submenu-title {
  padding: 14px 20px;
}
.ivu-menu-vertical .ivu-menu-submenu-title-icon {
  margin-right: 0px;
}
</style>