nankai-cms-website-gov/components/layout/CategoriesStarterButton.vue

<template>
  <div class="categories-window-starter" @click="visible = true">
    <img src="../../public/images/menu-icon.png" alt="">
  </div>
  <el-drawer
    class="categories-window"
    size="200"
    direction="ltr"
    v-model="visible"
  >
    <div class="window__body">
      <el-menu
        :popper-offset="0"
        popper-class="categories-window-popper"
        :default-active="menuConfig && menuConfig.uid || null"
        :default-openeds="menuConfig && menuConfig.parent && [menuConfig.parent.uid] || []"
        :show-timeout="0"
        :hide-timeout="0"
      >
        <CategoryChildren
          v-for="category in categories"
          :key="category.uid"
          :index="category.uid"
          :category="category"
        />
      </el-menu>
    </div>
  </el-drawer>
</template>

<script>
import CategoryChildren from '@/components/layout/CategoryChildren'

export default {
  name: 'CategoriesStarterButton',
  components: { CategoryChildren },
  props: {
    // 栏目树
    categories: {
      required: true
    }
  },
  data () {
    return {
      visible: false
    }
  },
  computed: {
    // 选中的菜单index
    menuConfig () {
      let path = this.$route.path.substring(this.$route.path.lastIndexOf('/') + 1)
      // 首页
      if (this.$route.path === '/') {
        path = 'sy'
      }
      const menuConfig = this.__getMenuConfig(path, 'uid', this.categories)
      if (menuConfig == null) {
        return null
      }
      return menuConfig
    }
  },
  methods: {
    /**
     * 获取菜单配置
     *
     * @param value 唯一标识值
     * @param key 唯一标识key
     * @param menus 查找菜单范围
     * @returns {null|*|null}
     * @private
     */
    __getMenuConfig (value, key, menus) {
      for (const menu of menus) {
        if (menu[key] === value) {
          return menu
        }
        if (menu.children != null && menu.children.length > 0) {
          const menuConfig = this.__getMenuConfig(value, key, menu.children)
          if (menuConfig != null) {
            return menuConfig
          }
        }
      }
      return null
    }
  }
}
</script>

<style lang="scss">
.categories-window {
  --window-body-bg-color: #fff;
  // 菜单样式
  .el-menu {
    --el-menu-bg-color: #fff;
    --el-menu-text-color: var(--font-color);
    --el-menu-hover-bg-color: transparent;
    --el-menu-item-font-size: var(--font-size-base);
    --el-border-color-light: #fff;
    --menu-active-background-color: #e9eaf3;
    --menu-active-text-color: var(--el-menu-text-color);

    border-right: 0 !important;
    user-select: none;
    background: var(--el-menu-bg-color) !important;
    a {
      color: var(--el-menu-text-color)!important;
    }
    .el-menu-item {
      color: var(--el-menu-text-color) !important;
      background: var(--el-menu-bg-color);
      transition: none;
      // 菜单padding
      a:link {
        width: 100%;
        padding-left: calc(var(--el-menu-base-level-padding) + var(--el-menu-level)* var(--el-menu-level-padding));
        padding: 0 var(--el-menu-base-level-padding);
        box-sizing: border-box;
      }
      .category-icon::before {
        color: var(--el-menu-text-color) !important;
      }
      // 选中状态
      &.is-active {
        background: var(--menu-active-background-color) !important;
        color: var(--menu-active-text-color) !important;
        position: relative;
      }
      // 悬浮
      &:hover {
        background-color: var(--el-menu-hover-bg-color);
      }
      &:focus {
        background: var(--el-menu-hover-bg-color);
      }
    }
    // 子菜单
    .el-sub-menu {
      // 子菜单padding
      a:link {
        padding: 0 var(--el-menu-base-level-padding);
        padding-left: calc(var(--el-menu-base-level-padding) + var(--el-menu-level)* var(--el-menu-level-padding));
      }
      .el-sub-menu__title{
        transition: none;
        color: var(--el-menu-text-color) !important;
        background-color: var(--el-menu-bg-color);
        a:link {
          width: 100%;
          display: flex;
          align-items: center;
          gap: 5px;
        }
      }
      // 选中状态
      &.is-active {
        // 将当前选中目录调整为深色
        .el-sub-menu__title {
          background-color: var(--el-menu-bg-color) !important;
        }
        // 将下一级子菜单的目录调整为深色
        .el-sub-menu {
          .el-sub-menu__title {
            background-color: var(--el-menu-bg-color) !important;
          }
        }
        .el-menu .el-menu-item{
          background-color: var(--el-menu-bg-color);
          // 悬浮
          &:hover {
            background-color: var(--el-menu-hover-bg-color);
          }
        }
      }
      // 菜单上下箭头
      .el-submenu__title i {
        color: #f7f7f7;
      }
    }
    // 移除padding 转移到link 中防止点击padding不跳转
    .el-menu-item {
      padding: 0!important;
    }
    // 为菜单链接时不改变padding
    .el-sub-menu__title {
      a:link:not(.el-sub-menu__title) {
        padding: 0!important;
      }
    }
    // 菜单图标
    .icon {
      position: relative;
      top: -1px;
      color: inherit !important;
      margin-right: 10px;
    }
  }
  .el-drawer__body {
    padding: 0!important;
  }
  .el-drawer__header {
    display: none;
  }
  a:link {
    color: var(--el-menu-text-color)!important;
  }
}
</style>

<style scoped lang="scss">
.categories-window {
  .window__body {
    height: 100%;
    background-color: var(--window-body-bg-color);
  }
}
// 窗口启动器
.categories-window-starter {
  background-color: #FFFFFF;
  height: 32px;
  width: 55px;
  background: var(--color-white);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    height: 20px;
    width: 30px;
  }
}
</style>