Forráskód Böngészése

feat: restore the breadcrumb display icon function

vben 4 éve
szülő
commit
f65bed72ac
2 módosított fájl, 24 hozzáadás és 2 törlés
  1. 1 0
      CHANGELOG.zh_CN.md
  2. 23 2
      src/layouts/default/LayoutBreadcrumb.tsx

+ 1 - 0
CHANGELOG.zh_CN.md

@@ -4,6 +4,7 @@
 
 - 新增`pwa`功能,可在`.env.production`开启
 - Button 组件扩展 `preIcon`和`postIcon`属性用于在文本前后添加图标
+- 恢复面包屑显示图标功能
 
 ### 🎫 Chores
 

+ 23 - 2
src/layouts/default/LayoutBreadcrumb.tsx

@@ -1,5 +1,6 @@
 import type { AppRouteRecordRaw } from '/@/router/types';
 import type { RouteLocationMatched } from 'vue-router';
+import type { PropType } from 'vue';
 
 import { defineComponent, TransitionGroup, unref, watch, ref } from 'vue';
 import Breadcrumb from '/@/components/Breadcrumb/Breadcrumb.vue';
@@ -10,10 +11,17 @@ import { PageEnum } from '/@/enums/pageEnum';
 import { isBoolean } from '/@/utils/is';
 
 import { compile } from 'path-to-regexp';
+import Icon from '/@/components/Icon';
 
 export default defineComponent({
   name: 'BasicBreadcrumb',
-  setup() {
+  props: {
+    showIcon: {
+      type: Boolean as PropType<boolean>,
+      default: false,
+    },
+  },
+  setup(props) {
     const itemList = ref<AppRouteRecordRaw[]>([]);
 
     const { currentRoute, push } = useRouter();
@@ -82,7 +90,20 @@ export default defineComponent({
                     isLink={isLink}
                     onClick={handleItemClick.bind(null, item)}
                   >
-                    {() => item.meta.title}
+                    {() => (
+                      <>
+                        {props.showIcon && item.meta.icon && item.meta.icon.trim() !== '' && (
+                          <Icon
+                            icon={item.meta.icon}
+                            class="icon mr-1 "
+                            style={{
+                              marginBottom: '2px',
+                            }}
+                          />
+                        )}
+                        {item.meta.title}
+                      </>
+                    )}
                   </BreadcrumbItem>
                 );
               });