thoth-frontend-test/src/components/newLayout/Aside.vue

<template>
  <div class="aside-main">
    <section
      v-show="showNavTag"
      :class="{
        'left-aside': !collapsed && navTagType === 1,
        'hidden-left-aside': collapsed && navTagType === 1,
        'top-aside': navTagType === 2
      }"
    >
      <div class="business">
        <div
          v-if="false"
          class="business-select"
          :class="{ 'show-business-all': showBizIdSelect }"
          @mouseenter="showBizIdSelect = true"
          @mouseleave="showBizIdSelect = false"
        >
          <img src="../../assets/业务线选择.png" class="business-logo"><span v-show="showBizIdSelect">项目管理首页</span>
        </div>
        {{ bizName }}
        <svg-icon icon-class="select-business" @click="handleClickRouter({ name: '业务线选择' })" />
      </div>
      <ul class="all-pages-list">
        <li v-for="item in routesList" :key="item.path" @click="handleClickRouter(item)">
          <template v-if="!item.hidden">
            <div v-if="item.cutOff" class="cut-off" />
            <div class="page-item" :class="{ 'active-page': activePage === item.name }">
              <svg-icon v-if="item.icon" v-show="navTagType === 1" :icon-class="item.icon" />
              {{ item.name }}
            </div>
          </template>
        </li>
      </ul>
      <div v-show="!collapsed && navTagType === 1" class="bottom-collapsed">
        <img src="../../assets/expand.png" @click="toggleCollapsed()">
      </div>
    </section>
    <section v-show="collapsed && navTagType === 1 && showNavTag" class="left-aside-collapsed">
      <div class="button-collapsed" @click="toggleCollapsed()"><i class="el-icon-arrow-right" /></div>
    </section>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import routes from '@/router/newRouter'
export default {
  data() {
    return {
      routesList: [], // 路由数组
      activePage: '', // 当前page页面
      showBizIdSelect: false // 显示业务线选择按钮
    }
  },
  computed: {
    ...mapGetters(['bizId', 'bizName', 'activeNavTag', 'navTagType', 'showNavTag', 'collapsed'])
  },
  watch: {
    // 当前2级导航栏对应的1级导航
    activeNavTag() {
      this.init()
    },
    // 当前2级导航的类型
    navTagType(newV) {
      newV === 1
        ? this.$store.dispatch('global/setCollapsed', false) // 二级侧边栏不收起
        : this.$store.dispatch('global/setCollapsed', true) // 二级侧边栏收起
    },
    $route: {
      handler(to) {
        this.activePage = to.name
      },
      immediate: true
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      const config = routes.find(item => item.name === this.activeNavTag)
      this.routesList = config.children
      // 子路由数量小于1，隐藏二级侧边栏控制
      if (this.routesList.length <= 1) {
        this.$store.dispatch('global/setShowNavTag', false) // 不展示二级侧边栏
        this.$store.dispatch('global/setCollapsed', true) // 二级侧边栏收起
      } else {
        this.$store.dispatch('global/setShowNavTag', true) // 展示二级侧边栏
        this.navTagType === 1
          ? this.$store.dispatch('global/setCollapsed', false) // 二级侧边栏不收起
          : this.$store.dispatch('global/setCollapsed', true) // 二级侧边栏收起
      }
    },
    // 路由跳转
    handleClickRouter(router) {
      this.$router.push({ name: router.name })
    },
    // 展开/收起侧边栏
    toggleCollapsed() {
      this.$store.dispatch('global/setCollapsed', !this.collapsed) // 二级侧边栏不收起
    }
  }
}
</script>
<style lang="scss" scoped>
ul,li{
  list-style: none;
  padding: 0;
  margin: 0;
}
section {
  height: 100%;
}
@keyframes expande {
  0% {
    width: 0;
  }
  100% {
    width: 135px;
  }
}
@keyframes close {
  0% {
    width: 135px;
  }
  100% {
    width: 0;
  }
}
@keyframes topExpande {
  0% {
    height: 0;
  }
  100% {
    height: 60px;
  }
}
.left-aside {
  width: 135px;
  // animation: 0.5s expande linear;
}
.hidden-left-aside {
  width: 0;
  // animation: 0.5s close linear;
}
//左边导航栏样式
.left-aside,
.hidden-left-aside {
  height: 100%;
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
  .business {
    position: relative;
    width: 100%;
    height: 60px;
    padding-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333333;
    font-size: 18px;
    border-bottom: 1px solid #eeeeee;
    white-space: nowrap;
    svg {
      cursor: pointer;
    }
    .business-select {
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 0;
      width: 32px;
      height: 20px;
      line-height: 20px;
      padding-left: 5px;
      background-color: #f2f8ff;
      border-radius: 0px 0px 10px 0px;
      span {
        margin-right: 5px;
        font-size: 12px;
        color: #565656;
      }
    }
    .show-business-all {
      width: 100px;
    }
    .business-logo {
      height: 15px;
      width: 15px;
      margin-right: 2px;
    }
  }
  .all-pages-list {
    margin-top: 33px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 14px;
    color: #444444;
    li {
      width: 100%;
    }
    .page-item {
      width: 100%;
      white-space: nowrap;
      padding: 5px 0 0 27px;
      margin-bottom: 10px;
      cursor: pointer;
      svg {
        margin-right: 5px;
      }
    }
    .active-page {
      color: #409eff;
    }
    .cut-off {
      border-top: 1px solid #eeeeee;
      margin: 10px 25px 20px 25px;
    }
    .page-item:hover {
      background-color: rgba(64, 158, 255, 0.1);
    }
  }
  .bottom-collapsed {
    height: 60px;
    padding: 0px;
    min-height: 5%;
    border-top: 1px solid #dcdfe6;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    font-size: 30px;
    img {
      height: 20px;
      margin-top: 10px;
      margin-right: 10px;
    }
  }
}
//顶部导航栏样式
.top-aside {
  width: calc(100% - 80px);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 81px;
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #ffffff;
  // animation: 0.5s topExpande linear;
  border-bottom: 10px solid #F2F3F6;
  .business {
    position: absolute;
    top: 0;
    left: 0;
    width: 135px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    color: #333333;
    font-size: 18px;
    border-right: 1px solid #eeeeee;
    white-space: nowrap;
    .business-select {
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 0;
      width: 32px;
      height: 20px;
      line-height: 20px;
      padding-left: 5px;
      background-color: #f2f8ff;
      border-radius: 0px 0px 10px 0px;
      span {
        margin-right: 5px;
        font-size: 12px;
        color: #565656;
      }
    }
    .show-business-all {
      width: 100px;
    }
    .business-logo {
      height: 15px;
      width: 15px;
      margin-right: 2px;
    }
  }
  .all-pages-list {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #444444;
    height: 100%;
    li {
      height: 100%;
      display: flex;
      align-items: center;
    }
    .page-item {
      height: 100%;
      display: flex;
      align-items: center;
      white-space: nowrap;
      padding: 0 5px;
      margin-right: 10px;
      cursor: pointer;
    }
    .active-page {
      color: #409eff;
    }
    .cut-off {
      height: 60%;
      margin: auto;
      border-left: 1px solid #eeeeee;
      margin-left: 10px;
      margin-right: 20px;
    }
    .page-item:hover {
      background-color: rgba(64, 158, 255, 0.1);
    }
  }
}
.left-aside-collapsed {
  background-color: #f7f8fc;
  color: #409eff;
  height: 100%;
  .button-collapsed {
    cursor: pointer;
    position: absolute;
    z-index: 101;
    bottom: 20px;
    width: 12px;
    height: 30px;
    background-color: #ffffff;
    font-size: 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #409eff;
    border-top: 1px solid#409eff;
    border-right: 1px solid #409eff;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}
.iconFont {
  font-size: 14px;
  margin: 3px 4px 0;
}
.iconFont:hover {
  cursor: pointer;
  color: #409eff;
}
</style>