58 lines
1.4 KiB
Vue
58 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<el-sub-menu :index="menu?.path" :class="subMenuClass" v-if="menu?.children?.length">
|
||
|
|
<template #title>
|
||
|
|
<el-icon>
|
||
|
|
<Icon :name="menu?.meta?.icon" v-if="menu?.meta?.icon" class="text-sm"/>
|
||
|
|
</el-icon>
|
||
|
|
<span>{{ menu?.meta?.title }}</span>
|
||
|
|
</template>
|
||
|
|
<slot/>
|
||
|
|
</el-sub-menu>
|
||
|
|
|
||
|
|
<el-menu-item v-else class="ct-menu-item" :index="menu?.path" @click="isMiniScreen() && store.changeExpaned()">
|
||
|
|
<el-icon>
|
||
|
|
<Icon :name="menu?.meta?.icon" v-if="menu?.meta?.icon" class="text-sm"/>
|
||
|
|
</el-icon>
|
||
|
|
<span>{{ menu?.meta?.title }}</span>
|
||
|
|
</el-menu-item>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" name="MenuItem" setup>
|
||
|
|
import { Menu } from '/admin/types/Menu'
|
||
|
|
import { PropType } from 'vue'
|
||
|
|
import { useAppStore } from '/admin/stores/modules/app'
|
||
|
|
import { isMiniScreen } from '/admin/support/Helper'
|
||
|
|
|
||
|
|
const store = useAppStore()
|
||
|
|
|
||
|
|
defineProps({
|
||
|
|
subMenuClass: {
|
||
|
|
type: String,
|
||
|
|
require: true,
|
||
|
|
default: '',
|
||
|
|
},
|
||
|
|
|
||
|
|
menu: {
|
||
|
|
type: Object as PropType<Menu>,
|
||
|
|
require: true,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
:deep(.el-menu) {
|
||
|
|
background-color: var(--sider-sub-menu-bg-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.ct-menu-item:hover {
|
||
|
|
background-color: var(--sider-sub-menu-hover-bg-color) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.children-menu .el-sub-menu__title) {
|
||
|
|
background-color: var(--sider-sub-menu-bg-color) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.el-menu-item-group__title) {
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
</style>
|