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

<template>
  <el-sub-menu
    :index="index"
    v-if="data.children?.length"
    :class="{ 'is-active': active }"
    @click="clickHandler"
  >
    <template #title>
      <div
        class="menu-layout"
        @mouseenter="hover?.enterHandler(props.data)"
        @mouseleave="hover?.leaveHandler(props.data)"
      >
        <Icon :name="showAttr.icon" size="24px" />
        <span>{{ showAttr.name }}</span>
      </div>
    </template>
    <SlideItem v-for="item in data.children" :data="item" />
  </el-sub-menu>
  <el-menu-item
    v-else
    :index="index"
    :class="{ 'is-active': active }"
    @click="clickHandler"
  >
    <div
      class="menu-layout"
      @mouseenter="hover?.enterHandler(props.data)"
      @mouseleave="hover?.leaveHandler(props.data)"
    >
      <Icon :name="showAttr.icon" size="22px" />
      <span>{{ showAttr.name }}</span>
    </div>
  </el-menu-item>
</template>

<script lang="ts" setup>
import { ElSubMenu, ElMenuItem } from "element-plus";
import { MenuItem } from "./menu";
import { computed } from "vue";
import { hoverManage } from "@/utils/shared";

const props = defineProps<{
  data: MenuItem;
  viewData?: Pick<MenuItem, "icon" | "name">;
  enterHandler?: (data: MenuItem) => (data: MenuItem) => void;
}>();
const emit = defineEmits<{
  (e: "update:activeIndex", value: string): void;
}>();

const index = computed(() => props.data.value || props.data.name);
const showAttr = computed(() => props.viewData || props.data);
const active = computed(() => false);
const clickHandler = () => {
  if (props.data.children?.length) {
    const item = props.data.children[0];
    emit("update:activeIndex", item.value || item.name);
  }
};

const hover = props.enterHandler && hoverManage(props.enterHandler);
</script>

<style lang="scss">
.is-active .menu-layout {
  background: var(--el-color-primary-light-7);
  // background: rgba(88,185,234,0.3);
}
</style>