修复 src 结构

src/component/splitPanel/index.less

@@ -0,0 +1,63 @@
+.lay-split-panel{
+  height: 100%;
+  display: flex;
+  position: relative;
+  .lay-split-panel-item {
+    height: 100%;
+    flex-grow: 1;
+    border: 1px #eeeeee solid;
+  }
+  .lay-split-panel-item-move{
+    user-select: none;
+    pointer-events: none;
+    cursor: col-resize;
+  }
+  .lay-split-panel-line{
+    height: 100%;
+    width: 3px;
+    border: 1px #eeeeee solid;
+    background-color: #fafafa;
+    border-left: none;
+    border-right: none;
+    cursor: col-resize;
+    display: flex;
+    align-items: center;
+    &:before{
+      content: "";
+      height: 6px;
+      width: 100%;
+      border: 2px solid #dcdee2;
+      border-left: 0;
+      border-right: 0;
+    }
+  }
+}
+
+.lay-split-panel-vertical{
+  flex-direction: column;
+  position: relative;
+  .lay-split-panel-item-move{
+    user-select: none;
+    pointer-events: none;
+    cursor: row-resize;
+  }
+  .lay-split-panel-line{
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    height: 3px;
+    cursor: row-resize;
+    border: 1px #eeeeee solid;
+    background-color: #fafafa;
+    border-top: none;
+    border-bottom: none;
+    &:before{
+      content: "";
+      height: 100%;
+      width: 6px;
+      border: 2px solid #dcdee2;
+      border-top: none;
+      border-bottom: none;
+    }
+  }
+}

src/component/splitPanel/index.ts

@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+import type { IDefineComponent } from "../type/index";
+
+Component.install = (app: App) => {
+  app.component(Component.name || "laySplitPanel", Component);
+};
+
+export default Component as IDefineComponent;

src/component/splitPanel/index.vue

@@ -0,0 +1,128 @@
+<template>
+  <div
+    ref="target"
+    :class="['lay-split-panel', vertical ? 'lay-split-panel-vertical' : '']"
+    :style="{
+      cursor: domStatus ? (!vertical ? 'col-resize' : 'row-resize') : '',
+    }"
+    v-on="{ mouseup: mouseup }"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup name="laySplitPanel" lang="ts">
+import { ref, watch, provide, defineProps, withDefaults, onMounted } from "vue";
+import "./index.less";
+
+// 属性接口定义
+export interface LayStepProps {
+  vertical?: boolean;
+  minSize?: number;
+}
+// props初始化数据定义
+const props = withDefaults(defineProps<LayStepProps>(), {
+  vertical: false,
+  minSize: 50,
+});
+let domEvent = ref();
+let domStatus = ref(false);
+const target = ref();
+
+onMounted(() => {
+  const boxWidth = target.value.offsetWidth;
+  const boxHeight = target.value.offsetHeight;
+  window.addEventListener("scroll", (event) => {
+    console.log(event);
+  });
+  target.value.addEventListener(
+    "mousemove",
+    (event: { layerX: any; layerY: any }) => {
+      if (domStatus.value) {
+        const prevDom = domEvent.value.target.previousElementSibling;
+        const nextDom = domEvent.value.target.nextElementSibling;
+        if (!props.vertical) {
+          const prevDomLeft =
+            domEvent.value.target.previousElementSibling.offsetLeft;
+          const prevDomWidth =
+            domEvent.value.target.previousElementSibling.offsetWidth;
+          const nextDomWidth =
+            domEvent.value.target.nextElementSibling.offsetWidth;
+          const otherWidth = boxWidth - (prevDomWidth + nextDomWidth + 5);
+          const otherWidthPercentage =
+            ((prevDomWidth + nextDomWidth + 5) / boxWidth) * 100;
+          if (
+            event.layerX - prevDomLeft < props.minSize ||
+            boxWidth - (event.layerX - prevDomLeft) - otherWidth < props.minSize
+          ) {
+            return false;
+          }
+          prevDom.style.width =
+            ((event.layerX - prevDomLeft) / (prevDomWidth + nextDomWidth + 5)) *
+              otherWidthPercentage +
+            "%";
+          nextDom.style.width =
+            ((boxWidth - (event.layerX - prevDomLeft) - otherWidth) /
+              (prevDomWidth + nextDomWidth + 5)) *
+              otherWidthPercentage +
+            "%";
+        } else {
+          const prevDomTop =
+            domEvent.value.target.previousElementSibling.offsetTop;
+          const prevDomHeight =
+            domEvent.value.target.previousElementSibling.offsetHeight;
+          const nextDomHeight =
+            domEvent.value.target.nextElementSibling.offsetHeight;
+          const otherHeight = boxHeight - (prevDomHeight + nextDomHeight + 5);
+          const otherHeightPercentage =
+            ((prevDomHeight + nextDomHeight + 5) / boxHeight) * 100;
+          if (
+            event.layerY - prevDomTop < props.minSize ||
+            boxHeight - (event.layerY - prevDomTop) - otherHeight <
+              props.minSize
+          ) {
+            return false;
+          }
+          prevDom.style.height =
+            ((event.layerY - prevDomTop) /
+              (prevDomHeight + nextDomHeight + 5)) *
+              otherHeightPercentage +
+            "%";
+          nextDom.style.height =
+            ((boxHeight - (event.layerY - prevDomTop) - otherHeight) /
+              (prevDomHeight + nextDomHeight + 5)) *
+              otherHeightPercentage +
+            "%";
+        }
+      }
+    }
+  );
+});
+
+const moveChange = (event: any, status: boolean) => {
+  domEvent.value = event;
+  domStatus.value = status;
+};
+
+const mouseup = () => {
+  domStatus.value = false;
+};
+
+// 定义初始化个数数组
+const steps = ref([]);
+// 监听有几个lay-split-panel-item
+watch(steps, () => {
+  steps.value.forEach(
+    (instance: { setIndex: (arg0: any) => void }, index: any) => {
+      instance.setIndex(index);
+    }
+  );
+});
+
+// 向lay-split-panel-item传递参数
+provide("laySplitPanel", {
+  props,
+  steps,
+  moveChange,
+});
+</script>