Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Menu): Add custom images to menu #3158

Merged
merged 7 commits into from
Oct 17, 2023
Merged

Conversation

wangjue666
Copy link
Member

resolves  #856

@wangjue666 wangjue666 marked this pull request as draft October 16, 2023 09:30
@wangjue666 wangjue666 changed the title feat(SimpleMenu): Add custom images to menu icons feat(Menu): Add custom images to menu icons Oct 16, 2023
@wangjue666
Copy link
Member Author

wangjue666 commented Oct 16, 2023

左侧菜单模式

左侧菜单模式

顶部菜单混合模式

顶部菜单混合模式

顶部菜单模式

1697451161011

左侧菜单混合模式

左侧菜单混合模式

顶部分割菜单模式

顶部分割菜单模式

@wangjue666
Copy link
Member Author

import headerImg from '/@/assets/images/header.jpg';

const dashboard: AppRouteModule = {
  path: '/dashboard',
  name: 'Dashboard',
  component: LAYOUT,
  redirect: '/dashboard/analysis',
  meta: {
    orderNo: 10,
    icon: 'ion:grid-outline',
    title: t('routes.dashboard.dashboard'),
    img: headerImg,
  },
  children: [
    {
      path: 'analysis',
      name: 'Analysis',
      component: () => import('/@/views/dashboard/analysis/index.vue'),
      meta: {
        // affix: true,
        title: t('routes.dashboard.analysis'),
        img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      },
    },
    {
      path: 'workbench',
      name: 'Workbench',
      component: () => import('/@/views/dashboard/workbench/index.vue'),
      meta: {
        title: t('routes.dashboard.workbench'),
      },
    },
  ],
};

@wangjue666 wangjue666 marked this pull request as ready for review October 16, 2023 10:07
@wangjue666 wangjue666 changed the title feat(Menu): Add custom images to menu icons feat(Menu): Add custom images to menu Oct 16, 2023
@@ -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" />
Copy link
Collaborator

@likui628 likui628 Oct 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

同时存在getImg和getIcon时我觉得还是只显示一个,下面还有几处也是

Copy link
Collaborator

@likui628 likui628 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

同时存在getImg和getIcon时我觉得还是只显示一个,不过问题不大

@wangjue666
Copy link
Member Author

同时存在getImg和getIcon时我觉得还是只显示一个,不过问题不大

嗯调整了,都存在的话,优先显示图片好了

@likui628 likui628 merged commit b3a6ef6 into vbenjs:main Oct 17, 2023
2 checks passed
@wangjue666 wangjue666 deleted the feat-menu-img branch October 17, 2023 06:09
zyt520ham pushed a commit to zyt520ham/vue-vben-admin that referenced this pull request Oct 17, 2023
* main:
  feat(Menu): Add custom images to menu  (vbenjs#3158)
  fix: 修复Modal.confirm的返回类型问题,需要有destroy,update的方法 (vbenjs#3161)
  chore: fix type:check error (vbenjs#3159)
  fix(BasicForm): useForm 中 scheme 选项 slot 与 component冲突 (vbenjs#3133)
  chore: replace intro.js with driver.js (vbenjs#3151)
  fix(ApiSelect): type warning
  feat(ApiTree): 完善ApiTree组件的重置回显功能. close vbenjs#2307
  chore(Demo): restore ApiTree schema show
  fix(ApiTree): Modify Trigger Selection Event Name
  fix: ApiTransfer 不支持disabled (vbenjs#3149)
  fix: vbenjs#3144 Drawer的footer样式错位问题 (vbenjs#3148)
  feat(BasicButton):  BasicButton组件支持icon插槽. close vbenjs#1377
  chore(Pagination): Remove the unnecessary pagesize attribute

# Conflicts:
#	pnpm-lock.yaml
#	src/components/Form/src/components/ApiSelect.vue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants