jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(projects): 创建自定义布局组件SoybeanLayout

Browse Source
This commit is contained in:
Soybean
2022-01-07 13:22:13 +08:00
parent 006467a062
commit 0653fb144f
18 changed files with 606 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/layouts/Layout/components/BasicLayout.vue
View File

@ -1,92 +0,0 @@
<template>
<div class="flex flex-col h-full">
<header
:class="{ 'fixed-lt': topFixed }"
:style="{ height: headerHeight + 'px', paddingLeft: headerPaddingLeft }"
class="z-1001 flex-shrink-0 w-full bg-white border-b border-gray-200 transition-all duration-300 ease-in-out"
>
<slot name="header">
<h3>Header</h3>
</slot>
</header>
<div
:class="{ fixed: topFixed }"
:style="{ top: headerHeight + 'px', height: tabHeight + 'px', paddingLeft: siderWidth }"
class="left-0 z-999 flex-shrink-0 w-full bg-white border-b border-gray-200 transition-all duration-300 ease-in-out"
>
<slot name="tab">
<div>Tab</div>
</slot>
</div>
<aside
:style="{ width: siderWidth, paddingTop: siderPaddingTop }"
:class="[isVertical ? 'z-1002' : 'z-1000']"
class="fixed-lt h-full transition-all duration-300 ease-in-out bg-white border-r border-gray-200"
>
<slot name="sider">
<n-space :vertical="true" align="center" class="pt-24px">
<n-button type="primary" @click="toggle">折叠</n-button>
<div>
<span class="pr-12px">固定头部和标签</span>
<n-switch v-model:value="fixed" />
</div>
<div>
<span class="pr-12px">vertical布局</span>
<n-switch v-model:value="isVertical" />
</div>
</n-space>
</slot>
</aside>
<main
class="flex-1 transition-all duration-300 ease-in-out"
:style="{ paddingLeft: siderWidth, paddingTop: mainPaddingTop }"
>
<slot></slot>
</main>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import { NSpace, NButton, NSwitch } from 'naive-ui';
import { useBoolean } from '@/hooks';
interface Props {
/** 头部高度 */
headerHeight?: number;
/** 标签页高度 */
tabHeight?: number;
/** 固定头部和标签 */
fixdTop?: boolean;
/** 侧边栏高度 */
siderWidth?: number;
/** 侧边栏折叠状态的高度 */
siderCollapsedWidth?: number;
/** 侧边栏折叠状态 */
siderCollapse?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
headerHeight: 56,
tabHeight: 44,
fixdTop: true,
topZIndex: 1000,
siderWidth: 200,
siderZIndex: 1001,
siderCollapsedWidth: 64,
siderCollapse: false
});
const { bool: collapse, toggle } = useBoolean();
const fixed = ref(true);
const isVertical = ref(true);
const topFixed = computed(() => fixed.value || !isVertical.value);
const siderWidth = computed(() => `${collapse.value ? props.siderCollapsedWidth : props.siderWidth}px`);
const headerPaddingLeft = computed(() => (isVertical.value ? siderWidth.value : '0px'));
const siderPaddingTop = computed(() => (isVertical.value ? '0px' : `${props.headerHeight}px`));
const mainPaddingTop = computed(() => `${fixed.value ? props.headerHeight + props.tabHeight : 0}px`);
</script>
<style scoped></style>

3
src/layouts/Layout/components/index.ts
View File

@ -1,3 +0,0 @@
import BasicLayout from './BasicLayout.vue';
export { BasicLayout };

75
src/layouts/Layout/index.vue
View File

@ -1,11 +1,80 @@
<template>
<basic-layout>
<soybean-layout :mode="mode" :fixed-header-and-tab="fixed" :fixed-footer="fixedFooter" :sider-collapse="collapse">
<template #header>
<div class="flex justify-end h-full bg-red-600">
<h3 class="text-white">Header</h3>
</div>
</template>
<template #tab>
<div class="h-full bg-green-600"></div>
</template>
<template #sider>
<div class="w-full h-full bg-gray-200">
<n-space :vertical="true" align="center" class="pt-24px">
<n-button type="primary" @click="toggle">折叠</n-button>
<div>
<span class="pr-12px">固定头部和标签</span>
<n-switch v-model:value="fixed" />
</div>
<div>
<span class="pr-12px">固定底部</span>
<n-switch v-model:value="fixedFooter" />
</div>
<div>
<span class="pr-12px">vertical布局</span>
<n-radio-group v-model:value="mode">
<n-radio v-for="item in radios" :key="item.value" :value="item.value">
{{ item.label }}
</n-radio>
</n-radio-group>
</div>
</n-space>
</div>
</template>
<global-content />
</basic-layout>
<template #footer>
<div class="h-full bg-blue-400">
<h3>footer</h3>
</div>
</template>
</soybean-layout>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { NSpace, NButton, NSwitch, NRadioGroup, NRadio } from 'naive-ui';
import { useElementSize } from '@vueuse/core';
import { useBoolean } from '@/hooks';
import { SoybeanLayout } from '@/package';
import { GlobalContent } from '../common';
import { BasicLayout } from './components';
type LayoutMode = 'vertical' | 'horizontal';
interface ModeRadio {
value: LayoutMode;
label: string;
}
const { width } = useElementSize(document.documentElement);
const { bool: collapse, toggle } = useBoolean();
const minWidthOfLayout = 1200;
const fixed = ref(true);
const fixedFooter = ref(true);
const mode = ref<LayoutMode>('vertical');
const radios: ModeRadio[] = [
{ value: 'vertical', label: 'vertical' },
{ value: 'horizontal', label: 'horizontal' }
];
watch(width, newValue => {
if (newValue < minWidthOfLayout) {
document.documentElement.style.overflowX = 'auto';
} else {
document.documentElement.style.overflowX = 'hidden';
}
});
</script>
<style scoped></style>