BaseLayout 是一个灵活的布局组件，支持垂直和水平布局模式。以下是该组件的基本用法和示例。

基本用法

点我查看代码

<div style="height:500px; padding: 20px; border-radius: 8px;">
      <base-layout
        layoutMode="vertical"
        sidebarWidth="200px"
        headHeight="60px"
        footHeight="40px"
        showSidebarCollapseButton="true"
        ref="blDemo1"
      >
        <template #logo>
          <div class="p-4 bg-blue-500 text-white">Logo</div>
        </template>
        <template #sidebar>
          <div class="p-4 bg-gray-100">Sidebar</div>
        </template>
        <template #head>
          <div class="p-4 bg-gray-200">Header</div>
        </template>
        <template #main>
          <div class="p-4 bg-white">Main Content</div>
        </template>
        <template #foot>
          <div class="p-4 bg-gray-300">Footer</div>
        </template>
      </base-layout>
</div>
<script setup>
  import { ref, onMounted } from "vue";
  const blDemo1 = ref(null);
  onMounted(() => {
    console.log(blDemo1.value);
  });
</script>

属性

属性名	类型	默认值	说明
sidebarWidth	string	200px	侧边栏宽度
sidebarCollapseWidth	string	60px	侧边栏收起时宽度
headHeight	string	60px	头部高度
footHeight	string	40px	底部高度
showSidebarCollapseButton	boolean	true	是否显示收起、展开按钮
showSidebarRightBorder	boolean	true	是否显示右侧边框
showLogoBottomBorder	boolean	true	是否显示底部边框
showLogoRightBorder	boolean	true	是否显示右部边框
showHeadBottomBorder	boolean	true	是否显示头部边框
showFootTopBorder	boolean	true	是否显示底部边框
layoutMode	'vertical' | 'horizontal'	'vertical'	布局模式
themeMode	'light' | 'dark'	'light'	主题模式

事件

事件名	参数	说明
onSidebarCollapseChange	collapse: boolean	侧边栏收起事件