Skip to content

Commit

Permalink
feat(Menu): Add custom images to menu (#3158)
Browse files Browse the repository at this point in the history
* feat(SimpleMenu): Add custom images to menu icons

* style: Set image and text alignment

* feat: 顶部菜单模式路由也支持图片

* feat(mixSilder): 左侧菜单混合模式也支持图片显示

* style(menu): 调整图片对齐样式

* chore(Menu): 调整图片与文字间距样式

* chore: icon和img都传值的情况下, 仅显示img
  • Loading branch information
wangjue666 committed Oct 17, 2023
1 parent a0e43ab commit b3a6ef6
Show file tree
Hide file tree
Showing 5 changed files with 19 additions and 2 deletions.
5 changes: 4 additions & 1 deletion src/components/Menu/src/components/MenuItemContent.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<span :class="`${prefixCls}- flex items-center `">
<img v-if="getImg" :src="getImg" class="w-18px h-18px align-top mr-2" />
<Icon v-if="getIcon" :icon="getIcon" :size="18" :class="`${prefixCls}-wrapper__icon mr-2`" />
{{ getI18nName }}
</span>
Expand All @@ -22,12 +23,14 @@
setup(props) {
const { prefixCls } = useDesign('basic-menu-item-content');
const getI18nName = computed(() => t(props.item?.name));
const getIcon = computed(() => props.item?.icon);
const getIcon = computed(() => (props.item?.img ? undefined : props.item?.icon));
const getImg = computed(() => props.item?.img);
return {
prefixCls,
getI18nName,
getIcon,
getImg,
};
},
});
Expand Down
6 changes: 5 additions & 1 deletion src/components/SimpleMenu/src/SimpleSubMenu.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
v-bind="$props"
:class="getLevelClass"
>
<img v-if="getImg" :src="getImg" class="w-16px h-16px align-top" />
<Icon v-if="getIcon" :icon="getIcon" :size="16" />
<div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-1 collapse-title">
{{ getI18nName }}
Expand All @@ -23,6 +24,7 @@
:collapsedShowTitle="collapsedShowTitle"
>
<template #title>
<img v-if="getImg" :src="getImg" class="w-16px h-16px align-top" />
<Icon v-if="getIcon" :icon="getIcon" :size="16" />

<div v-if="collapsedShowTitle && getIsCollapseParent" class="mt-2 collapse-title">
Expand Down Expand Up @@ -79,7 +81,8 @@
const { prefixCls } = useDesign('simple-menu');
const getShowMenu = computed(() => !props.item?.meta?.hideMenu);
const getIcon = computed(() => props.item?.icon);
const getIcon = computed(() => (props.item?.img ? undefined : props.item?.icon));
const getImg = computed(() => props.item?.img);
const getI18nName = computed(() => t(props.item?.name));
const getShowSubTitle = computed(() => !props.collapse || !props.parent);
const getIsCollapseParent = computed(() => !!props.collapse && !!props.parent);
Expand All @@ -106,6 +109,7 @@
menuHasChildren,
getShowMenu,
getIcon,
getImg,
getI18nName,
getShowSubTitle,
getLevelClass,
Expand Down
6 changes: 6 additions & 0 deletions src/layouts/default/sider/MixSider.vue
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,13 @@
:key="item.path"
>
<SimpleMenuTag :item="item" collapseParent dot />
<img
v-if="item.img"
:src="item.img"
:class="[`${prefixCls}-module__icon`, getCollapsed ? 'w-16px h-16px' : 'w-20px h-20px']"
/>
<Icon
v-else
:class="`${prefixCls}-module__icon`"
:size="getCollapsed ? 16 : 20"
:icon="item.icon || (item.meta && item.meta.icon)"
Expand Down
2 changes: 2 additions & 0 deletions src/router/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@ export interface Menu {

icon?: string;

img?: string;

path: string;

// path contains param, auto assignment.
Expand Down
2 changes: 2 additions & 0 deletions types/vue-router.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ declare module 'vue-router' {
affix?: boolean;
// icon on tab
icon?: string;
// img on tab
img?: string;
frameSrc?: string;
// current page transition
transitionName?: string;
Expand Down

0 comments on commit b3a6ef6

Please sign in to comment.