Browse Source

perf: 控制面包屑的宽度

曾坤森 3 months ago
parent
commit
3cf2d57cde
1 changed files with 9 additions and 5 deletions
  1. 9 5
      src/components/navbar/index.vue

+ 9 - 5
src/components/navbar/index.vue

@@ -218,10 +218,14 @@ const topMenu = computed(() => appStore.topMenu && appStore.menu);
 const collapsed = computed(() => {
   return appStore.menuCollapse;
 });
-const currentWidth = ref<string>('calc(100% - 220px)');
-const toggleWidth = (value: boolean) => {
-  currentWidth.value = value ? 'calc(100% - 44px)' : 'calc(100% - 220px)';
-};
+const menuWidth = computed(() => {
+  return appStore.menuWidth;
+});
+const currentWidth = computed(() => {
+  let width = menuWidth.value - 12;
+  return collapsed.value ? 'calc(100% - 38px)' : `calc(100% - ${width}px)`;
+});
+
 const isDark = useDark({
   selector: 'body',
   attribute: 'arco-theme',
@@ -271,7 +275,7 @@ const setCollapse = (val: boolean) => {
 };
 const toggleCollapse = () => {
   setCollapse(!collapsed.value);
-  toggleWidth(collapsed.value);
+  // toggleWidth(collapsed.value);
 };
 </script>