refactor
This commit is contained in:
@@ -10,7 +10,6 @@ const { changeThemeSettings, setScale, layoutConfig } = useLayoutService();
|
|||||||
const onConfigButtonClick = () => {
|
const onConfigButtonClick = () => {
|
||||||
visible.value = !visible.value;
|
visible.value = !visible.value;
|
||||||
};
|
};
|
||||||
|
|
||||||
const onChangeTheme = (theme, mode) => {
|
const onChangeTheme = (theme, mode) => {
|
||||||
const elementId = 'theme-css';
|
const elementId = 'theme-css';
|
||||||
const linkElement = document.getElementById(elementId);
|
const linkElement = document.getElementById(elementId);
|
||||||
@@ -26,12 +25,10 @@ const onChangeTheme = (theme, mode) => {
|
|||||||
|
|
||||||
changeThemeSettings(theme, mode === 'dark');
|
changeThemeSettings(theme, mode === 'dark');
|
||||||
};
|
};
|
||||||
|
|
||||||
const decrementScale = () => {
|
const decrementScale = () => {
|
||||||
setScale(layoutConfig.scale.value - 1);
|
setScale(layoutConfig.scale.value - 1);
|
||||||
applyScale();
|
applyScale();
|
||||||
};
|
};
|
||||||
|
|
||||||
const incrementScale = () => {
|
const incrementScale = () => {
|
||||||
setScale(layoutConfig.scale.value + 1);
|
setScale(layoutConfig.scale.value + 1);
|
||||||
applyScale();
|
applyScale();
|
||||||
|
|||||||
@@ -157,17 +157,12 @@ const model = ref([
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
]);
|
]);
|
||||||
|
|
||||||
function test(e) {
|
|
||||||
console.log('test');
|
|
||||||
console.log(e);
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ul class="layout-menu">
|
<ul class="layout-menu">
|
||||||
<template v-for="(item, i) in model" :key="item">
|
<template v-for="(item, i) in model" :key="item">
|
||||||
<app-menu-item @submenu:opened="test" v-if="!item.separator" :item="item" :index="i"></app-menu-item>
|
<app-menu-item v-if="!item.separator" :item="item" :index="i"></app-menu-item>
|
||||||
<li v-if="item.separator" class="menu-separator"></li>
|
<li v-if="item.separator" class="menu-separator"></li>
|
||||||
</template>
|
</template>
|
||||||
<li>
|
<li>
|
||||||
|
|||||||
@@ -28,11 +28,15 @@ const props = defineProps({
|
|||||||
|
|
||||||
const isActiveMenu = ref(false);
|
const isActiveMenu = ref(false);
|
||||||
const itemKey = ref(null);
|
const itemKey = ref(null);
|
||||||
|
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
itemKey.value = props.parentItemKey ? props.parentItemKey + '-' + props.index : String(props.index);
|
itemKey.value = props.parentItemKey ? props.parentItemKey + '-' + props.index : String(props.index);
|
||||||
|
|
||||||
isActiveMenu.value = layoutConfig.activeMenuItem.value === itemKey.value || layoutConfig.activeMenuItem?.value?.startsWith(itemKey.value + '-');
|
const activeItem = layoutState.activeMenuItem;
|
||||||
|
|
||||||
|
isActiveMenu.value = activeItem === itemKey.value || activeItem ? activeItem.startsWith(itemKey.value + '-') : false;
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => layoutConfig.activeMenuItem.value,
|
() => layoutConfig.activeMenuItem.value,
|
||||||
(newVal) => {
|
(newVal) => {
|
||||||
@@ -45,16 +49,19 @@ const itemClick = (event, item) => {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if ((item.to || item.url) && (layoutState.staticMenuMobileActive.value || layoutState.overlayMenuActive.value)) {
|
const { overlayMenuActive, staticMenuMobileActive } = layoutState;
|
||||||
|
|
||||||
|
if ((item.to || item.url) && (staticMenuMobileActive.value || overlayMenuActive.value)) {
|
||||||
onMenuToggle();
|
onMenuToggle();
|
||||||
}
|
}
|
||||||
//execute command
|
|
||||||
if (item.command) {
|
if (item.command) {
|
||||||
item.command({ originalEvent: event, item: item });
|
item.command({ originalEvent: event, item: item });
|
||||||
}
|
}
|
||||||
|
|
||||||
if (item.items) setActiveMenuItem(isActiveMenu.value ? props.parentItemKey : itemKey);
|
const foundItemKey = item.items ? (isActiveMenu.value ? props.parentItemKey : itemKey) : itemKey.value;
|
||||||
else setActiveMenuItem(itemKey.value);
|
|
||||||
|
setActiveMenuItem(foundItemKey);
|
||||||
};
|
};
|
||||||
|
|
||||||
const checkActiveRoute = (item) => {
|
const checkActiveRoute = (item) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user