4dkankan-components/packages/components/basic/menu-item/index.vue

<template>
    <div class="ui-menu-item" :class="{ active }" ref="self" @mouseenter="emit('enter')" @mouseleave="emit('leave')" @click="emit('click')">
        <UIIcon :type="icon" size="18px" />
        <span>{{ text }}</span>
        <slot></slot>
    </div>
</template>

<script setup>
import UIIcon from '../icon'
import { defineProps, defineExpose, defineEmits, ref } from 'vue'

const self = ref(null)
// const props =
defineProps({
    icon: {
        type: String,
        require: true,
    },
    text: {
        type: String,
        require: true,
    },
    active: {
        type: Boolean,
    },
})
const emit = defineEmits(['leave', 'enter', 'click'])

defineExpose({ dom: self })
</script>

<script>
export default { name: 'UiMenuItem' }
</script>