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: require("../../static/image/order-icon.png"),
          children: [
            {
              path: "/",
              name: "HomeIndex",
              title: "订单列表",
            },
            {
              path: "/orderSearch",
              name: "orderSearch",
              title: "订单查询",
            },
            {
              path: "/manualCreate",
              name: "manualCreate",
              title: "手动发单",
            },
          ],
        },
        {
          path: "/shopInfo",
          name: "shopInfo",
          title: "商户信息",
          icon: require("../../static/image/shop-icon.png"),
          children: [
            {
              path: "/shopInfo/shopInfos",
              name: "shopInfos",
              title: "门店管理",
            },
            {
              path: "/shopInfo/shopAccount",
              name: "shopInfos",
              title: "我的账户",
            },
          ],
        },
        {
          path: "/setUp",
          name: "setUp",
          title: "设置",
          icon: require("../../static/image/setting-icon.png"),
          children: [
            {
              path: "/setUp/set",
              name: "set",
              title: "外卖设置",
            },
            {
              path: "/setUp/addressManagement",
              name: "addressManagement",
              title: "常用地址",
            },
            {
              path: "/setUp/pictureManagement",
              name: "pictureManagement",
              title: "商品管理",
            },
          ],
        },
        {
          path: "/help",
          name: "help",
          title: "帮助中心",
          icon: require("../../static/image/help-icon.png"),
        },
        {
          path: '/download',
          name: 'download',
          title: '下载中心',
          icon: require("../../static/image/download-icon.png"),
        },
        {
          path: "/about",
          name: "about",
          title: "关于我们",
          icon: require("../../static/image/about-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>