github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-08-27 19:29:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: fix topMenu align not work

Browse Source
This commit is contained in:
vben
2020-11-24 00:22:01 +08:00
parent 36734100e3
commit 25d43a5f7c
3 changed files with 20 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/design/global.less
View File

@@ -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 {

16
src/layouts/default/header/LayoutHeader.tsx
View File

@@ -1,6 +1,6 @@
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({
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({
useWindowSizeFn( useWindowSizeFn(
() => { () => {
nextTick(() => {
if (!unref(getShowTopMenu)) return; if (!unref(getShowTopMenu)) return;
let width = 0; let width = 0;
if (!logoEl) { if (!logoEl) {
logoEl = document.querySelector('.layout-header__logo'); logoEl = logoRef.value.$el;
} }
if (logoEl) { if (logoEl) {
width += logoEl.clientWidth; width += logoEl.clientWidth;
} }
widthRef.value = width + 60; logoWidthRef.value = width + 80;
});
}, },
200, 200,
{ immediate: true } { immediate: true }
@@ -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) && (

4
src/layouts/default/header/index.less
View File

@@ -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 @@
} }
&__menu { &__menu {
margin-left: 20px; margin-left: 4px;
overflow: hidden; overflow: hidden;
align-items: center; align-items: center;
} }