init

src/component/layout/index.less

@@ -0,0 +1,24 @@
+@import "../header/index.less";
+
+.layui-layout {
+  flex: 1;
+  display: flex;
+  flex-basis: auto;
+  box-sizing: border-box;
+}
+
+.layui-layout-vertical {
+  flex-direction: column;
+}
+
+.layui-layout-left {
+  position: absolute !important;
+  left: 200px;
+  top: 0;
+}
+
+.layui-layout-right {
+  position: absolute !important;
+  right: 0;
+  top: 0;
+}

src/component/layout/index.ts

@@ -0,0 +1,5 @@
+import { withInstall, WithInstallType } from "../../utils";
+import Component from "./index.vue";
+
+const component: WithInstallType<typeof Component> = withInstall(Component);
+export default component;

src/component/layout/index.vue

@@ -0,0 +1,45 @@
+<script lang="ts">
+export default {
+  name: "LayLayout",
+};
+</script>
+
+<script setup lang="ts">
+import { Component, computed, useSlots } from "vue";
+import Header from "../header/index.vue";
+import Footer from "../footer/index.vue";
+import "./index.less";
+
+export interface LayoutProps {
+  isVertical?: boolean;
+}
+
+const slots = useSlots();
+
+const props = withDefaults(defineProps<LayoutProps>(), {
+  isVertical: false,
+});
+
+const isVertical = computed(() => {
+  if (!slots.default) return false;
+  const vNodes = slots.default();
+  return vNodes.some((vNode) => {
+    const componentName = (vNode.type as Component).name;
+    if (!componentName) return false;
+    return (
+      [Header.name].includes(componentName) ||
+      [Footer.name].includes(componentName)
+    );
+  });
+});
+
+const classes = computed(() => {
+  return ["layui-layout", { "layui-layout-vertical": isVertical.value }];
+});
+</script>
+
+<template>
+  <section :class="classes">
+    <slot></slot>
+  </section>
+</template>