sunmicro-lvgl-designer/src/renderer/src/views/designer/tools/components/MenuItem.vue

<template>
  <div
    class="flex flex-col justify-center items-center w-50px h-50px cursor-pointer mr-10px hover:bg-bg-tertiary rounded-4px"
    :class="disabled ? 'cursor-not-allowed text-text-secondary' : 'pointer-cursor'"
    @click="handleClick(item)"
  >
    <div class="w-30px h-30px flex items-center justify-center">
      <img
        v-if="typeof item.img === 'string'"
        :src="item.img"
        class="w-24px h-24px"
        :alt="item.label"
      />
      <component v-else :is="item.img" size="20px"></component>
    </div>
    <div class="text-12px">{{ item.label }}</div>
  </div>
</template>

<script setup lang="ts">
import type { VNode } from 'vue'
import { defineEmits, defineProps } from 'vue'

const props = defineProps<{
  item: {
    key: string
    label: string
    img: string | VNode
  }
  disabled?: boolean
  onClick?: (item: { key: string; label: string; img: string | VNode }) => void
}>()

const emit = defineEmits<{
  (e: 'click', item: { key: string; label: string; img: string | VNode }): void
}>()

function handleClick(item: { key: string; label: string; img: string | VNode }) {
  if (props.disabled) return
  emit('click', item)
}
</script>

<style scoped></style>