4dkankan_back/src/page/layout/slide.vue

<template>
  <div class="slide-layout nav-menu">
    <div class="navigator_menu">
      <span>导航面板</span>
    </div>
    <el-menu
      text-color="#999"
      :default-active="actice_idx"
      active-text-color="#333"
      class="el-menu-vertical-demo"
      @select="handleSelect"
    >
      <template v-for="(nav, i) in navs">
        <router-link tag="div" :to="nav.link" :key="i" v-if="!nav.children">
          <el-menu-item :index="i + ''" style="padding-left: 49px;">
            <i
              class="iconfonts i-fix"
              :style="{
                backgroundPosition:
                  '0px -' +
                  (Number(actice_idx) === i ? nav.top + 14 : nav.top) +
                  'px'
              }"
            ></i>
            <span slot="title">{{ nav.text }}</span>
          </el-menu-item>
        </router-link>

        <el-submenu v-else :key="i" :index="i + ''">
          <template slot="title">
            <i
              class="iconfonts i-fix"
              :style="{ backgroundPosition: '0px -' + nav.top + 'px' }"
            ></i>
            <span style="padding-left:30px">{{ nav.text }}</span>
          </template>

          <router-link
            tag="div"
            :to="nav.link"
            v-for="(nav, j) in nav.children"
            :key="j"
          >
            <el-menu-item :index="i + '-' + j">{{ nav.text }}</el-menu-item>
          </router-link>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'm-aside',
  component: {},

  data () {
    let navs = [
      { text: '首页', link: {name: 'Home'}, top: 14 },
      { text: '订单管理', link: { name: 'Order' }, top: 42 },
      { text: '设备管理', link: { name: 'device' }, top: 126 },

      // { text: '订单管理',
      //   link: {name: 'Order'},
      //   children: [
      //     { text: '相机订单', link: {name: 'Order'} },
      //     { text: '权益订单', link: {name: 'qyOrder'} },
      //     { text: '下载订单', link: {name: 'downloadOrder'} }
      //   ],
      //   top: 42 },
      // { text: '增值服务', link: {name: 'Added'}, top: 70 },
      // {
      //   text: '代理平台',
      //   link: {name: 'home'},
      //   children: [
      //     { text: '代理管理', link: {name: 'hone'} },
      //     { text: '代理查询', link: {name: 'hone'} },
      //     { text: '公告设置', link: {name: 'hone'} }
      //   ],
      //   top: 98
      // },
      // { text: '发票管理', link: {name: 'invoice'}, top: 126 },
      {
        text: '更多设置',
        link: { name: 'home' },
        children: [
          // { text: '激光场景', link: {name: 'laser'} },
          { text: '场景管理', link: { name: 'scene' } },
          { text: '反馈消息', link: { name: 'feedback' } },
          // { text: '设备管理', link: {name: 'device'} },
          { text: 'app管理', link: { name: 'appupload' } },
          { text: '客户管理', link: { name: 'client' } }
        ],
        top: 154
      },
      // { text: '经销商申请', link: {name: 'distributor-list'}, top: 98 },
      // { text: '留言管理', link: {name: 'leaving'}, top: 182 },
      {
        text: '版本管理',
        link: { name: 'edition' },
        children: [
          { text: '八目相机', link: { name: 'edition' }, top: 182 },
          { text: '转台相机', link: { name: 'turntableCamera' }, top: 182 },
          { text: '激光相机', link: { name: 'laserCamera' }, top: 182 }
        ],
        top: 154
      },
      // { text: '版本管理', link: {name: 'edition'}, top: 182 },
      { text: '数据统计', link: { name: 'Statistics' }, top: 210 }
      // {
      //   text: 'SDK 发布管理',
      //   link: {name: 'sdkManage'},
      //   children: [
      //     { text: 'SpaceTarget', link: {name: 'spaceTarget'}, top: 182 }
      //   ],
      //   top: 154
      // },
      // { text: '用户列表', link: {name: 'userList'}, top: 126 },
      // { text: '操作日志', link: {name: 'oplog'}, top: 210 }

      //   { text: '数据下载', link: {name: 'Down'}, top: 210 }
      // ,
      // {
      //   text: 'BBS',
      //   link: {name: 'home'},
      //   children: [
      //     { text: '文章列表', link: {name: 'home'} },
      //     { text: '评论管理', link: {name: 'home'} },
      //     { text: '用户管理', link: {name: 'home'} }
      //   ],
      //   top: 182
      // }
    ]

    return {
      actice_idx: '1',
      navs: navs
    }
  },
  mounted () {
    let index = this.navs.findIndex(i => {
      console.log(i.link.name, this.$route.name)
      return i.link.name === this.$route.name
    }).toString()
    console.log(index)

    if (index !== -1) {
      this.actice_idx = index
    }
  },
  methods: {
    handleSelect (key) {
      console.log(key)
      this.actice_idx = key
    },
    openNotice () {
      this.$store.commit('SET_OPENNOTICE', true)
    }
  }
}
</script>

<style scoped>
.slide-layout {
  border: 1px solid #ebeef5;
  background: #ffffff;
  z-index: 1;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.nav-menu {
  padding-left: 5px;
  user-select: none;
  font-size: 20px;
}

.nav-menu-item {
  margin: 20px 0;
}

.menu-title {
  font-size: 18px;
  margin-left: 15px;
}

.jiantou {
  width: 8px;
  height: 8px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(135deg);
  display: inline-block;
  margin-left: 64px;
}

.flex-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s;
}

.flex-item-list {
  margin-left: 32px;
  margin-top: 20px;
}

.flex-item-list li {
  cursor: pointer;
  margin-top: 20px;
  color: #999;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */

 {
  opacity: 0;
}

.iconfont {
  margin-right: 10px;
}

.navigator_menu {
  line-height: 56px;
  height: 56px;
}

.navigator_menu > span {
  padding-left: 20px;
  font-size: 12px;
  color: #999;
}
</style>

<style type="text/css">
.el-menu-item.is-active {
  background: #f2f2f2;
  /*color: #333;*/
}

.i-fix {
  display: inline-block;
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  background-image: url("~@/assets/images/icon/sys_icon.png");
}

.iconfonts {
  position: absolute;
  left: 20px;
  top: 50%;
  margin-top: -9px;
}
</style>