Skip to content

Commit

Permalink
fix: fix topMenu align not work
Browse files Browse the repository at this point in the history
  • Loading branch information
anncwb committed Nov 23, 2020
1 parent 3673410 commit 25d43a5
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 18 deletions.
4 changes: 2 additions & 2 deletions src/design/global.less
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@
}

.justify-start {
justify-content: start;
justify-content: flex-start;
}

.justify-end {
justify-content: end;
justify-content: flex-end;
}

.justify-around {
Expand Down
30 changes: 16 additions & 14 deletions src/layouts/default/header/LayoutHeader.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import './index.less';

import { defineComponent, unref, computed, ref } from 'vue';
import { defineComponent, unref, computed, ref, nextTick } from 'vue';

import { Layout, Tooltip, Badge } from 'ant-design-vue';
import { AppLogo } from '/@/components/Application';
Expand Down Expand Up @@ -39,8 +39,8 @@ export default defineComponent({
setup() {
let logoEl: Element | null;

const widthRef = ref(200);

const logoWidthRef = ref(200);
const logoRef = ref<any>(null);
const { refreshPage } = useTabs();

const { getShowTopMenu, getShowHeaderTrigger, getSplit, getTopMenuAlign } = useMenuSetting();
Expand All @@ -64,15 +64,17 @@ export default defineComponent({

useWindowSizeFn(
() => {
if (!unref(getShowTopMenu)) return;
let width = 0;
if (!logoEl) {
logoEl = document.querySelector('.layout-header__logo');
}
if (logoEl) {
width += logoEl.clientWidth;
}
widthRef.value = width + 60;
nextTick(() => {
if (!unref(getShowTopMenu)) return;
let width = 0;
if (!logoEl) {
logoEl = logoRef.value.$el;
}
if (logoEl) {
width += logoEl.clientWidth;
}
logoWidthRef.value = width + 80;
});
},
200,
{ immediate: true }
Expand Down Expand Up @@ -105,11 +107,11 @@ export default defineComponent({
}

function renderHeaderContent() {
const width = unref(widthRef);
const width = unref(logoWidthRef);
return (
<div class="layout-header__content ">
{unref(getShowHeaderLogo) && (
<AppLogo class={`layout-header__logo`} theme={unref(getTheme)} />
<AppLogo class={`layout-header__logo`} ref={logoRef} theme={unref(getTheme)} />
)}

{unref(getShowContent) && (
Expand Down
4 changes: 2 additions & 2 deletions src/layouts/default/header/index.less
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

&__left {
display: flex;
flex-grow: 1;
// flex-grow: 1;
align-items: center;

.layout-trigger {
Expand Down Expand Up @@ -184,7 +184,7 @@
}

&__menu {
margin-left: 20px;
margin-left: 4px;
overflow: hidden;
align-items: center;
}
Expand Down

0 comments on commit 25d43a5

Please sign in to comment.