|
@@ -10,20 +10,23 @@ 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',
|
|
|
- props: {
|
|
|
- showIcon: {
|
|
|
- type: Boolean,
|
|
|
- default: false,
|
|
|
- },
|
|
|
- },
|
|
|
- setup(props) {
|
|
|
+ setup() {
|
|
|
const itemList = ref<AppRouteRecordRaw[]>([]);
|
|
|
+
|
|
|
const { currentRoute, push } = useRouter();
|
|
|
|
|
|
+ watch(
|
|
|
+ () => currentRoute.value,
|
|
|
+ () => {
|
|
|
+ if (unref(currentRoute).name === 'Redirect') return;
|
|
|
+ getBreadcrumb();
|
|
|
+ },
|
|
|
+ { immediate: true }
|
|
|
+ );
|
|
|
+
|
|
|
function getBreadcrumb() {
|
|
|
const { matched } = unref(currentRoute);
|
|
|
const matchedList = matched.filter((item) => item.meta && item.meta.title).slice(1);
|
|
@@ -63,36 +66,23 @@ export default defineComponent({
|
|
|
return push(pathCompile(path));
|
|
|
}
|
|
|
|
|
|
- watch(
|
|
|
- () => currentRoute.value,
|
|
|
- () => {
|
|
|
- if (unref(currentRoute).name === 'Redirect') return;
|
|
|
- getBreadcrumb();
|
|
|
- },
|
|
|
- { immediate: true }
|
|
|
- );
|
|
|
-
|
|
|
return () => (
|
|
|
<Breadcrumb class="layout-breadcrumb">
|
|
|
{() => (
|
|
|
<TransitionGroup name="breadcrumb">
|
|
|
{() => {
|
|
|
return unref(itemList).map((item) => {
|
|
|
- const isLink = !!item.redirect && !item.meta.disabledRedirect;
|
|
|
+ const isLink =
|
|
|
+ (!!item.redirect && !item.meta.disabledRedirect) ||
|
|
|
+ !item.children ||
|
|
|
+ item.children.length === 0;
|
|
|
return (
|
|
|
<BreadcrumbItem
|
|
|
key={item.path}
|
|
|
isLink={isLink}
|
|
|
onClick={handleItemClick.bind(null, item)}
|
|
|
>
|
|
|
- {() => (
|
|
|
- <>
|
|
|
- {props.showIcon && item.meta.icon && item.meta.icon.trim() !== '' && (
|
|
|
- <Icon icon={item.meta.icon} class="icon mr-1 mb-1" />
|
|
|
- )}
|
|
|
- {item.meta.title}
|
|
|
- </>
|
|
|
- )}
|
|
|
+ {() => item.meta.title}
|
|
|
</BreadcrumbItem>
|
|
|
);
|
|
|
});
|