drawing-board-service/example/fuse/views/slide/slide.vue

<template>
  <div class="slide">
    <el-menu
      :default-active="draw?.presetAdd && getValue(draw?.presetAdd)"
      class="slide-menu"
      @select="selectHandler"
      collapse
      :popper-offset="0"
      popper-class="slide-popper"
    >
      <SlideItem v-for="menu in menus" :data="menu" />
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { ElMenu } from "element-plus";
import { getItem, getValue, menus } from "./menu.ts";
import SlideItem from "./slide-item.vue";
import { useDraw } from "../use-draw.ts";

const draw = useDraw();
const selectHandler = (value: string) => {
  const item = getItem(value);
  if (!item || !item.payload) throw "无效菜单";
  draw.value!.enterMouseAddShape(item.payload.type, item.payload.preset);
};
</script>
/

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

.slide {
  transition: transform 0.3s ease;
  margin-left: 0;

  &.hide {
    transform: translateX(-100%);
  }
}

.slide-menu {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
</style>

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

.slide-popper .el-menu--popup {
  min-width: global.$slideSize;
}
</style>
/