feat: 手动切换当前路由,菜单也会自动展开

This commit is contained in:
wanchun 2023-04-11 13:00:48 +08:00
parent 86f5504c11
commit 6b48e89e90

View File

@ -12,7 +12,7 @@
</template> </template>
<script> <script>
import { computed, h, ref } from 'vue'; import { computed, h, ref, watch } from 'vue';
import { FMenu } from '@fesjs/fes-design'; import { FMenu } from '@fesjs/fes-design';
import { useRoute, useRouter } from '@@/core/coreExports'; import { useRoute, useRouter } from '@@/core/coreExports';
import { transform as transformByAccess } from '../helpers/pluginAccess'; import { transform as transformByAccess } from '../helpers/pluginAccess';
@ -94,23 +94,34 @@ export default {
} }
return matchMenus[0].path; return matchMenus[0].path;
}); });
const getDefaultExpandMenu = () => {
let index = menuArray.value.findIndex((item) => item.value === activePath.value); const expandedKeysRef = ref(props.expandedKeys);
if (index === -1) {
return props.expandedKeys; watch(
} [menuArray, activePath],
const activeMenu = menuArray.value[index]; () => {
const arr = [activeMenu]; let index = menuArray.value.findIndex((item) => item.value === activePath.value);
while (index > 0) { if (index === -1) {
index = index - 1; return;
const lastMenu = menuArray.value[index];
if (lastMenu.children && lastMenu.children.indexOf(arr[arr.length - 1]) !== -1) {
arr.push(lastMenu);
} }
} const activeMenu = menuArray.value[index];
return props.expandedKeys.concat(arr.map((item) => item.value)); const arr = [activeMenu];
}; while (index > 0) {
const expandedKeysRef = ref(getDefaultExpandMenu()); index = index - 1;
const lastMenu = menuArray.value[index];
if (lastMenu.children && lastMenu.children.indexOf(arr[arr.length - 1]) !== -1) {
arr.push(lastMenu);
}
}
expandedKeysRef.value = expandedKeysRef.value.concat(
arr.filter((item) => !expandedKeysRef.value.includes(item.value)).map((item) => item.value),
);
},
{
immediate: true,
},
);
const onMenuClick = (e) => { const onMenuClick = (e) => {
const path = e.value; const path = e.value;
if (/^https?:\/\//.test(path)) { if (/^https?:\/\//.test(path)) {
@ -121,6 +132,7 @@ export default {
console.warn('[plugin-layout]: 菜单的path只能使以http(s)开头的网址或者路由地址'); console.warn('[plugin-layout]: 菜单的path只能使以http(s)开头的网址或者路由地址');
} }
}; };
return { return {
activePath, activePath,
expandedKeysRef, expandedKeysRef,