drawing-board-service/src/example/components/slide/slide.vue

<template>
  <div class="slide">
    <el-menu
      :default-active="active"
      class="slide-menu"
      @select="(val) => (active = active === val ? undefined : val)"
      collapse
      :popper-offset="0"
      :popper-class="childType || 'slide-menu-poper'"
      @open="openHandler"
    >
      <SlideItem v-for="menu in menus" :data="menu" />
    </el-menu>

    <div class="ext">
      <component
        v-if="activeMenu?.mount"
        :is="activeMenu?.mount"
        :draw="draw"
        @exit="active = undefined"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElMenu } from "element-plus";
import { getItem, getValue, MenuItem } from "./menu.ts";
import SlideItem from "./slide-item.vue";
import { computed, nextTick, ref, watch } from "vue";
import { Draw } from "../container/use-draw.ts";

const props = defineProps<{ menus: MenuItem[]; draw: Draw }>();
const active = ref<string>();
const activeMenu = computed(() =>
  active.value === undefined ? null : getItem(active.value, props.menus)
);

watch(activeMenu, (menu, _, onCleanup) => {
  if (!menu || menu.mount) return;
  if (menu.handler) {
    menu.handler(props.draw);
    nextTick(() => (active.value = undefined));
  } else {
    props.draw.enterDrawShape(menu.payload.type, menu.payload.preset);
    onCleanup(() => props.draw.quitDrawShape());
  }
});

watch(
  () => props.draw.presetAdd && getValue(props.draw.presetAdd, props.menus),
  (val) => {
    active.value = val;
  }
);

const childType = ref<string>();
const openHandler = (value: string) => {
  const item = getItem(value, props.menus);
  childType.value = item?.type;
};
</script>

<style lang="scss" scoped>
@use '../../styles/global';

.slide {
  margin-left: 0;
  &.hide {
    transform: translateX(-100%);
  }
  position: relative;
}

.slide-menu {
  padding: 20px 0;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.ext {
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  z-index: 999;
}
</style>

<style lang="scss">
@use '../../styles/global';

.slide-popper .el-menu--popup {
  width: global.$slideSize;
}

.slide-popper .el-menu--popup,
.slide-menu-poper .el-menu--popup {
  width: global.$slideSize;
}

.slide-menu,
.slide-menu-poper .el-menu--popup {
  --el-menu-base-level-padding: 0;
  --el-menu-item-height: 70px;

  .el-menu-item,
  .el-sub-menu__title {
    background: none;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      width: 56px;
      height: 56px;
      background: var(--el-menu-hover-bg-color);
      border-radius: 4px;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 0;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    &:hover::before {
      opacity: 1;
    }
  }
}

.slide-menu-poper .el-menu--popup {
  min-width: auto;
}

.slide-menu .menu-layout,
.slide-menu-poper .menu-layout {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  margin: auto;
  border-radius: 4px;
  overflow: hidden;
  color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1em;
  font-size: 22px;
  span {
    font-size: 14px;
    margin-top: 5px;
  }
}

.sub-menu-horizontal .el-menu--popup {
  min-width: auto;
  .menu-layout {
    font-size: 32px;
    display: flex;
    align-items: center;
    span {
      margin-left: 5px;
      font-size: 14px;
    }
  }
}
</style>