feat: restore the breadcrumb display icon function

vbenjs · Oct 27, 2020 · f65bed7 · f65bed7
1 parent a2c413a
commit f65bed7
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 2 deletions.
diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
@@ -4,6 +4,7 @@
 
 - 新增`pwa`功能，可在`.env.production`开启
 - Button 组件扩展 `preIcon`和`postIcon`属性用于在文本前后添加图标
+- 恢复面包屑显示图标功能
 
 ### 🎫 Chores
 

diff --git a/src/layouts/default/LayoutBreadcrumb.tsx b/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>
                 );
               });