提交 25d43a5f 作者: vben

fix: fix topMenu align not work

上级 36734100
...@@ -26,11 +26,11 @@ ...@@ -26,11 +26,11 @@
} }
.justify-start { .justify-start {
justify-content: start; justify-content: flex-start;
} }
.justify-end { .justify-end {
justify-content: end; justify-content: flex-end;
} }
.justify-around { .justify-around {
......
import './index.less'; 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 { Layout, Tooltip, Badge } from 'ant-design-vue';
import { AppLogo } from '/@/components/Application'; import { AppLogo } from '/@/components/Application';
...@@ -39,8 +39,8 @@ export default defineComponent({ ...@@ -39,8 +39,8 @@ export default defineComponent({
setup() { setup() {
let logoEl: Element | null; let logoEl: Element | null;
const widthRef = ref(200); const logoWidthRef = ref(200);
const logoRef = ref<any>(null);
const { refreshPage } = useTabs(); const { refreshPage } = useTabs();
const { getShowTopMenu, getShowHeaderTrigger, getSplit, getTopMenuAlign } = useMenuSetting(); const { getShowTopMenu, getShowHeaderTrigger, getSplit, getTopMenuAlign } = useMenuSetting();
...@@ -64,15 +64,17 @@ export default defineComponent({ ...@@ -64,15 +64,17 @@ export default defineComponent({
useWindowSizeFn( useWindowSizeFn(
() => { () => {
if (!unref(getShowTopMenu)) return; nextTick(() => {
let width = 0; if (!unref(getShowTopMenu)) return;
if (!logoEl) { let width = 0;
logoEl = document.querySelector('.layout-header__logo'); if (!logoEl) {
} logoEl = logoRef.value.$el;
if (logoEl) { }
width += logoEl.clientWidth; if (logoEl) {
} width += logoEl.clientWidth;
widthRef.value = width + 60; }
logoWidthRef.value = width + 80;
});
}, },
200, 200,
{ immediate: true } { immediate: true }
...@@ -105,11 +107,11 @@ export default defineComponent({ ...@@ -105,11 +107,11 @@ export default defineComponent({
} }
function renderHeaderContent() { function renderHeaderContent() {
const width = unref(widthRef); const width = unref(logoWidthRef);
return ( return (
<div class="layout-header__content "> <div class="layout-header__content ">
{unref(getShowHeaderLogo) && ( {unref(getShowHeaderLogo) && (
<AppLogo class={`layout-header__logo`} theme={unref(getTheme)} /> <AppLogo class={`layout-header__logo`} ref={logoRef} theme={unref(getTheme)} />
)} )}
{unref(getShowContent) && ( {unref(getShowContent) && (
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
&__left { &__left {
display: flex; display: flex;
flex-grow: 1; // flex-grow: 1;
align-items: center; align-items: center;
.layout-trigger { .layout-trigger {
...@@ -184,7 +184,7 @@ ...@@ -184,7 +184,7 @@
} }
&__menu { &__menu {
margin-left: 20px; margin-left: 4px;
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论