menu.vue 2.84 KB
<template>
  <div class="box">
    <el-menu
      :default-active="activemenu"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @select="handleSelect"
      :unique-opened="true"
      wdth="116vw"
    >
      <!-- <el-submenu index="1" class="menu-icon">
        <template slot="title">
          <i class="icon-fanxing-iconxuanzhongshouye1"></i>
          <span slot="title">态势总览</span>
        </template>
        <el-menu-item index="/trficcshow">
          <i class="submenuicon"></i>交通展示
        </el-menu-item>
        <el-menu-item index="/behaviorshow">
          <i class="submenuicon"></i>综治展示
        </el-menu-item>
      </el-submenu> -->
      <el-submenu
        v-for="(fristmenu, index) in permission_routers"
        :index="fristmenu.path"
        :key="index"
        class="menu-icon"
      >
        <template slot="title">
          <i :class="fristmenu.meta.icon"></i>
          <span slot="title">{{ fristmenu.name }}</span>
        </template>
        <el-menu-item
          v-for="(twomenu, index) in fristmenu.children"
          :key="index"
          :index="twomenu.path"
        >
          <i class="submenuicon"></i>{{ twomenu.name }}
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";

export default {
  data() {
    return {
      full: false,
      isCollapse: false,
      activemenu: "/indexshow",
      topbar: []
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$router.push(key).catch(err => {
        err;
      });
      localStorage.setItem("curmenu", key);
      this.activemenu = key;
    },
    collapsemenu() {
      this.isCollapse = !this.isCollapse;
    }
  },
  computed: {
    ...mapGetters(["permission_routers"])
  },
  created() {
    // let activemenu = localStorage.getItem("curmenu");
    let activemenu = location.href.split("#")[1];
    if (activemenu) {
      this.activemenu = activemenu;
      this.$router.push(activemenu).catch(err => {
        err;
      });
    } else {
      this.$router.push("/").catch(err => {
        err;
      });
      this.activemenu = "/";
    }
  },
  watch: {
    $route(t, f) {
      let obj = {
        name: t.name,
        path: t.path
        // icon:t.meta.icon
      };
      this.$emit("setTopBar", obj);
    }
  }
};
</script>

<style lang="stylus" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
    box-shadow: 0px -3px 8px 0px rgba(40,49,101,0.13);
  }
.box{
  height 100%;
  box-shadow:0px -3px 8px 0px rgba(40,49,101,0.13);
}
.menu-icon i{
  font-size 14px;
  padding-right:10px;
}
.menu-icon .submenuicon{
  display inline-block;
  height 3px;
  width 3px;
  background:rgba(0,0,0,0.85);
  opacity .5;
  border-radius 5px;
  margin-left -10px;
  margin-right 10px;
  padding-right:0px;
}
</style>