SteelfurnitureWeb/src/components/category.vue

<template>
  <div class="menuDiv">
    <h3 v-if="showHeader">{{ $t("page.components.category.showHeader") }}</h3>
    <ul class="menuUl">
      <li
        v-for="({ id, title, subList }, index) in items"
        :key="`menu-${index}`"
        class="menuli"
      >
        <div
          class="dalei"
          :class="{ curr: currPid === id }"
          @click="() => setCurrIndex(id)"
        >
          <div />
          {{ title }}
          <i class="el-icon-arrow-right"></i>
        </div>
        <div class="menuCon" v-if="subList.length">
          <div
            v-for="({ id: sid, title: st }, i) in subList"
            :key="`menu-item-${i}`"
            :class="{ item: true, curr: currSid === sid }"
            @click="() => setCurrIndex(sid)"
          >
            {{ st }}
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
import menu from "@/store/modules/menu";
@Component
export default class extends Vue {
  @Prop(Number)
  private currId!: number;
  @Prop(Boolean) private showHeader!: boolean;
  get items() {
    return menu.pList.map(x => ({
      ...x,
      subList: menu.subList(x.id)
    }));
  }
  get info() {
    return menu.info(this.currId);
  }
  get currPid() {
    if (!this.info) return 0;
    return this.info.pId || this.info.id;
  }
  get currSid() {
    if (!this.info) return 0;
    return this.info.id;
  }
  @Emit("change")
  setCurrIndex(id: number) {
    return id;
  }
}
</script>
<style lang="scss" scoped>
.menuDiv {
  width: 100%;
  height: 39rem;
  // overflow: hidden;
  position: relative;
  display: flex; //因为菜单项不固定 但总高度固定 所以不得不采用flex布局
  flex-flow: column nowrap;
  h3 {
    background: #fd5522;
    color: #fff;
    height: 35px;
    line-height: 35px;
    padding-left: 20px;
  }
  .menuUl {
    list-style: none;
    width: 100%;
    background: #fff;
    flex-grow: 1;
    display: flex;
    flex-flow: column nowrap;
    li.menuli {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      // height: 5.6rem;
      // line-height: 5.6rem;
      font-size: 1.4rem;
      color: #333;
      border-bottom: 0.1rem solid #e5e5e5;

      box-sizing: border-box;

      &:hover {
        .menuCon {
          display: block;
        }
      }
      .dalei {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        flex-grow: 1;
        cursor: pointer;
        padding-right: 1.6rem;
        text-align: center;
        &.curr,
        &:hover {
          background: #ffddd3;
          color: #fd5522;
          div {
            background: #fd5522;
          }
        }
        div {
          display: inline-block;
          height: 1.4rem;
          width: 0.2rem;
          background: #fff;
          // margin-right: 1.6rem;
        }
        // i {
        //   float: right;
        //   margin-top: 2rem;
        // }
      }
    }
  }
  .menuCon {
    overflow: hidden;
    // overflow: scroll;
    // width: 60rem;
    // min-height: 38rem;
    background: #fff;
    padding: 1.6rem;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    z-index: 99;
    display: none;
    width: 160px;
    padding: 0 20px;
    border: 1px solid #fd5522;
    .item {
      font-size: 1.2rem;
      color: #333;
      margin: 1rem 0;
      cursor: pointer;
      &.curr,
      &:hover {
        color: #fd5522;
      }
    }
  }
}
</style>