Browse Source

feat: restore the breadcrumb display icon function

pull/117/head
vben 6 years ago
parent
commit
f65bed72ac
  1. 1
      CHANGELOG.zh_CN.md
  2. 25
      src/layouts/default/LayoutBreadcrumb.tsx

1
CHANGELOG.zh_CN.md

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

25
src/layouts/default/LayoutBreadcrumb.tsx

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

Loading…
Cancel
Save