liebao-web/src/common/sider.vue

<template>
    <el-aside style="width: 254px;">
      <div class="sidebar">
        <div class="side-logo">
          <img @click="$router.push({path:'/'})" src="/static/image/logo.png" class="logo" />
        </div>
        <el-menu class="sidebar-el-menu" :default-active="$route.path" :collapse="collapse" background-color="#00152A"
          text-color="#bfcbd9" active-text-color="#20a0ff" router>
          <template v-for="item in items">
            <template v-if="item.children">
              <el-submenu :index="item.path" :key="item.path">
                <template slot="title">
                  <!-- <i :class="[item.icon,'aliFamily']"></i> -->
                  <img v-if="item.icon" class="side-bar-icon" :src="item.icon" />
                  <span slot="title">{{ item.title }}</span>
                </template>
                <template v-for="subItem in item.children">
                  <el-submenu v-if="subItem.children" :index="subItem.path" :key="subItem.path">
                    <template slot="title">{{ subItem.title }}</template>
                    <el-menu-item v-for="(threeItem,i) in subItem.children" :key="i" :index="threeItem.path">
                      {{ threeItem.title }}</el-menu-item>
                  </el-submenu>
                  <el-menu-item v-else :index="subItem.path" :key="subItem.path">{{ subItem.title }}</el-menu-item>
                </template>
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item :index="item.path" :key="item.path">
                <!-- <i :class="[item.icon,'aliFamily']"></i> -->
                <img :src="item.icon" class="side-bar-icon" v-if="item.icon" />
                <span slot="title">{{ item.title }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </div>
    </el-aside>
</template>

<script>
  import bus from '../common/bus'
  import router from '../router/index.js';
  export default {
    data() {
      return {
        collapse: false,
        //items: []
        items: [
          {
            path: '/',
            name: 'home',
            title: '一键发单',
            icon: '/static/image/order-icon.png',
            children: [
              {
                path: '/',
                name: 'HomeIndex',
                title: '订单列表',
              },
              {
                path: '/orderSearch',
                name: 'orderSearch',
                title: '订单查询',
              }
            ]
          },
          {
            path: '/shopInfo',
            name: 'shopInfo',
            title: '商户信息',
            icon: '/static/image/shop-icon.png',
            children: [
              {
                path: '/shopInfo/shopInfos',
                name: 'shopInfos',
                title: '门店管理',
              },
              {
                path: '/shopInfo/shopAccount',
                name: 'shopInfos',
                title: '我的账户',
              }
            ]
          },
          {
            path: '/setUp/set',
            name: 'setUp',
            title: '设置',
            icon: '/static/image/setting-icon.png'
          }
        ]
      }
    },
    created() {
      console.log(router.options.routes)
      //this.items = [...router.options.routes];
      // 通过 Event Bus 进行组件间通信，来折叠侧边栏
      bus.$on('collapse', msg => {
        this.collapse = msg
        bus.$emit('collapse-content', msg)
      })
    }
  }
</script>

<style lang='scss' scoped='scoped'>
  /deep/ .el-submenu .el-menu-item {
    padding-left: 76px !important;
  }
  /deep/ .el-menu-item.is-active {
    color: #fff !important;
    background-color: #0C2B47 !important;
    border-right: 6px solid #009CFF;
  }
  .sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    padding-top: 80px;
  }
  .side-logo {
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    padding-top: 18px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 400;
    background-color: #fff;
    font-size: 0;
    padding-left: 32px;
    cursor: pointer;
  }
  .logo {
    width: 204px;
    height: 44px;
  }
  .side-bar-icon {
    width: 21px;
    height: 21px;
    margin-right: 18px;
    margin-left: 14px;
  }
  .aliFamily {
    font-size: 24px;
    margin-right: 10px;
  }

  .sidebar::-webkit-scrollbar {
    width: 0;
  }

  .sidebar-el-menu:not(.el-menu--collapse) {
    width: 254px;
    box-sizing: border-box;
  }

  .sidebar>ul {
    height: 100%;
  }
</style>