menu.vue 2.44 KB
<template>
  <div class="box">
    <el-menu
      :default-active="activemenu"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @select="handleSelect"
      :unique-opened="true"
    >
      <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: "/",
      topbar:[]
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      this.$router.push(key);
      localStorage.setItem("curmenu", key);
      this.activemenu = key
    },
    collapsemenu() {
      this.isCollapse = !this.isCollapse;
    }
  },
  computed: {
    ...mapGetters(["permission_routers"])
  },
  created() {
    let activemenu = localStorage.getItem("curmenu");
    if (activemenu) {
      this.activemenu = activemenu;
      this.$router.push(activemenu);
    } else {
      this.$router.push('/');
      this.activemenu = '/';
    }
  },
  watch:{
    $route(t, f){
      let obj = {
        name:f.name,
        path:f.path,
        icon:f.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{
  height 100%;
}
.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>