🐛(component): splitPanel

space 修改为像素，其他自适应

ISSUES CLOSED: https://gitee.com/layui/layui-vue/issues/I5FB3S

package/component/src/component/splitPanel/index.less

@@ -4,7 +4,6 @@
   position: relative;
   .lay-split-panel-item {
     height: 100%;
-    flex-grow: 1;
     border: 1px #eeeeee solid;
   }
   .lay-split-panel-item-move {

package/component/src/component/splitPanel/index.vue

@@ -1,14 +1,15 @@
 <script lang="ts">
 export default {
-  name: "laySplitPanel",
+  name: "LaySplitPanel",
 };
 </script>
 
 <script setup lang="ts">
 import { ref, watch, provide, withDefaults, onMounted } from "vue";
 import "./index.less";
+import { useMousePressed } from "@vueuse/core";
 
-export interface LayStepProps {
+interface LayStepProps {
   vertical?: boolean;
   minSize?: number;
 }
@@ -17,21 +18,20 @@ const props = withDefaults(defineProps<LayStepProps>(), {
   vertical: false,
   minSize: 50,
 });
+const target = ref();
+const { pressed } = useMousePressed({ target: target });
 
 let domEvent = ref();
-let domStatus = ref(false);
+let domStatus = ref(pressed);
-const target = ref();
+let parentVertical = 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) {
+      if (domStatus.value && domEvent.value) {
         const prevDom = domEvent.value.target.previousElementSibling;
         const nextDom = domEvent.value.target.nextElementSibling;
         if (!props.vertical) {
@@ -50,11 +50,11 @@ onMounted(() => {
           ) {
             return false;
           }
-          prevDom.style.width =
+          prevDom.style.flexBasis =
             ((event.layerX - prevDomLeft) / (prevDomWidth + nextDomWidth + 5)) *
               otherWidthPercentage +
             "%";
-          nextDom.style.width =
+          nextDom.style.flexBasis =
             ((boxWidth - (event.layerX - prevDomLeft) - otherWidth) /
               (prevDomWidth + nextDomWidth + 5)) *
               otherWidthPercentage +
@@ -76,12 +76,12 @@ onMounted(() => {
           ) {
             return false;
           }
-          prevDom.style.height =
+          prevDom.style.flexBasis =
             ((event.layerY - prevDomTop) /
               (prevDomHeight + nextDomHeight + 5)) *
               otherHeightPercentage +
             "%";
-          nextDom.style.height =
+          nextDom.style.flexBasis =
             ((boxHeight - (event.layerY - prevDomTop) - otherHeight) /
               (prevDomHeight + nextDomHeight + 5)) *
               otherHeightPercentage +
@@ -92,13 +92,16 @@ onMounted(() => {
   );
 });
 
-const moveChange = (event: any, status: boolean) => {
+const moveChange = (event: any, status: boolean, isVertical: boolean) => {
   domEvent.value = event;
   domStatus.value = status;
+  parentVertical.value = isVertical;
 };
 
 const mouseup = () => {
   domStatus.value = false;
+  domEvent.value = null;
+  parentVertical.value = false;
 };
 
 // 定义初始化个数数组
@@ -116,6 +119,7 @@ watch(steps, () => {
 provide("laySplitPanel", {
   props,
   steps,
+  target,
   moveChange,
 });
 </script>

package/component/src/component/splitPanelItem/index.vue

@@ -14,12 +14,11 @@ import {
   onBeforeUnmount,
   reactive,
   withDefaults,
-  watch,
 } from "vue";
 
 import type { ComputedRef } from "vue";
 
-export interface LayStepItemProps {
+interface LayStepItemProps {
   space?: number;
 }
 
@@ -34,11 +33,6 @@ const setIndex = (val: number) => {
   index.value = val;
 };
 
-const mousedown = (event: any) => {
-  moveStatus.value = true;
-  parents.moveChange(event, true);
-};
-
 const mouseup = (event: any) => {
   moveStatus.value = false;
 };
@@ -47,6 +41,34 @@ const stepsCount = computed(() => {
   return parents.steps.value.length;
 });
 
+const initSpace = (parentSpace: any, key: string) => {
+  const childList = Array.from(parentElement.value.children);
+  childList.forEach((item: any, index: number) => {
+    if (index === 0 || index % 2 === 0) {
+      item.style.flexBasis = (item[key] / parentSpace) * 100 + "%";
+      item.style.flexGrow = 0;
+    }
+  });
+};
+
+const mousedown = (event: any) => {
+  let parentSpace = 0;
+  if (!isVertical.value) {
+    parentSpace = parentElement.value.offsetWidth;
+    initSpace(parentSpace, "offsetWidth");
+  } else {
+    parentSpace = parentElement.value.offsetHeight;
+    initSpace(parentSpace, "offsetHeight");
+  }
+
+  moveStatus.value = true;
+  parents.moveChange(event, true, isVertical.value);
+};
+
+const parentElement = computed(() => {
+  return parents.target.value;
+});
+
 const isVertical = computed(() => {
   return parents.props.vertical;
 });
@@ -63,9 +85,8 @@ const isStart: ComputedRef<boolean> = computed(() => {
 const stepItemState = reactive({
   itemId: computed(() => currentInstance?.uid),
   setIndex,
-  width: [],
+  space: props.space,
 });
-
 parents.steps.value = [...parents.steps.value, stepItemState];
 
 onMounted(() => {});
@@ -85,16 +106,17 @@ onBeforeUnmount(() => {
     v-on="{ mousedown: mousedown, mouseup: mouseup }"
   ></div>
   <div
+    ref="laySplitPanelItem"
     v-if="isVertical"
     :class="['lay-split-panel-item']"
-    :style="{ height: `${space ? space : (100 + space) / stepsCount}%` }"
+    :style="{ flexBasis: `${space}px`, flexGrow: space ? 0 : 1 }"
   >
     <slot></slot>
   </div>
   <div
     v-else
     :class="['lay-split-panel-item']"
-    :style="{ width: `${space ? space : (100 + space) / stepsCount}%` }"
+    :style="{ flexBasis: `${space}px`, flexGrow: space ? 0 : 1 }"
   >
     <slot></slot>
   </div>

package/component/src/component/table/TableRow.vue

@@ -165,7 +165,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
       return `layui-table-fixed-right-first`;
     }
   }
-}
+};
 </script>
 
 <template>

package/component/src/component/table/index.vue

@@ -281,7 +281,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
           left = false;
         }
       }
-      return left ? `layui-table-fixed-left-last` : '';
+      return left ? `layui-table-fixed-left-last` : "";
     } else {
       var right = true;
       for (var i = 0; i < columnIndex; i++) {
@@ -289,10 +289,10 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
           right = false;
         }
       }
-      return right ? `layui-table-fixed-right-first` : '';
+      return right ? `layui-table-fixed-right-first` : "";
-    }
     }
   }
+};
 </script>
 
 <template>
@@ -379,7 +379,7 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
                     class="layui-table-cell"
                     :class="[
                       column.fixed ? `layui-table-fixed-${column.fixed}` : '',
-                      renderFixedClassName(column, columnIndex)
+                      renderFixedClassName(column, columnIndex),
                     ]"
                     :style="[
                       {

package/component/src/component/transition/index.vue

@@ -1,6 +1,8 @@
 <template>
   <template v-if="enable">
-    <LayCollapseTransition v-if="type === 'collapse'"><slot></slot></LayCollapseTransition>
+    <LayCollapseTransition v-if="type === 'collapse'"
+      ><slot></slot
+    ></LayCollapseTransition>
     <LayFadeTransition v-if="type === 'fade'"><slot></slot></LayFadeTransition>
   </template>
   <template v-else>
@@ -28,8 +30,8 @@ export interface LayTransitionProps {
 const props = withDefaults(defineProps<LayTransitionProps>(), {
   type: "collapse",
   enable: true,
-  time:0.3
+  time: 0.3,
 });
 
-provide('time',props.time)
+provide("time", props.time);
 </script>

package/component/src/component/transition/transitions/collapseTransition.vue

@@ -18,9 +18,9 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { inject } from 'vue';
+import { inject } from "vue";
 
-const time=inject('time')
+const time = inject("time");
 const elTransition = `${time}s height ease-in-out, ${time}s padding-top ease-in-out, ${time}s padding-bottom ease-in-out`;
 
 const beforeEnter = (el: any) => {

package/component/src/component/transition/transitions/fadeTransition.vue

@@ -4,9 +4,9 @@
   </transition>
 </template>
 <script setup lang="ts">
-import { inject,ref } from 'vue';
+import { inject, ref } from "vue";
 
-const time=inject('time')
+const time = inject("time");
 const transition = ref(`opacity ${time}s ease`);
 </script>
 <style>

package/component/src/component/tree/TreeNode.vue

@@ -65,9 +65,7 @@ const nodeIconType = (node: TreeData): string => {
     return "";
   }
   if (node.children.length !== 0) {
-    return !node.isLeaf
+    return !node.isLeaf ? "layui-icon-addition" : "layui-icon-subtraction";
-      ? "layui-icon-addition"
-      : "layui-icon-subtraction";
   }
   return "layui-icon-file";
 };
@@ -108,9 +106,10 @@ const isChildAllSelected=computed(()=>{
       if (item.isChecked) childSelectNum++;
     }
     if (childSelectNum > 0) node.isChecked = true; //此处的处理与 checkedKeys 有关联
-    if(childSelectNum==node.children.length){//继续递归向下判断
+    if (childSelectNum == node.children.length) {
+      //继续递归向下判断
       for (const item of node.children) {
-        res=_isChildAllSelected(item)
+        res = _isChildAllSelected(item);
         if (res) break;
       }
     } else {
@@ -119,10 +118,10 @@ const isChildAllSelected=computed(()=>{
     return res;
   }
   return function (node: TreeData): boolean {
-    let res=_isChildAllSelected(node)
+    let res = _isChildAllSelected(node);
     return res;
-  }
+  };
-})
+});
 </script>
 
 <template>
@@ -143,7 +142,10 @@ const isChildAllSelected=computed(()=>{
             { 'layui-tree-iconClick': true },
           ]"
         >
-          <lay-icon :type="nodeIconType(node)" @click.stop="handleIconClick(node)" />
+          <lay-icon
+            :type="nodeIconType(node)"
+            @click.stop="handleIconClick(node)"
+          />
         </span>
         <lay-checkbox
           v-if="showCheckbox"
@@ -156,7 +158,7 @@ const isChildAllSelected=computed(()=>{
               handleChange(checked, node);
             }
           "
-          :isIndeterminate='isChildAllSelected(node)'
+          :isIndeterminate="isChildAllSelected(node)"
         />
         <span
           :class="{

package/component/src/component/tree/index.vue

@@ -43,7 +43,9 @@ interface TreeEmits {
 }
 
 const props = withDefaults(defineProps<TreeProps>(), {
-  checkedKeys:()=>{ return [] },
+  checkedKeys: () => {
+    return [];
+  },
   showCheckbox: false,
   edit: false,
   collapseTransition: true,
@@ -75,22 +77,22 @@ let tree=ref();
 let nodeList = ref();
 const loadNodeList = () => {
   let { tree: _tree, nodeList: _nodeList } = useTree(props, emit);
-  tree.value=_tree
+  tree.value = _tree;
-  nodeList.value=_nodeList.value
+  nodeList.value = _nodeList.value;
-}
+};
 watch(
   () => props.data,
   () => {
     loadNodeList();
   },
   { deep: true, immediate: true }
-)
+);
 watch(
   () => props.checkedKeys,
   () => {
-    loadNodeList()
+    loadNodeList();
-  },
+  }
-)
+);
 
 function handleClick(node: TreeData) {
   const originNode = tree.value.getOriginData(node.id);

package/component/src/component/tree/tree.ts

@@ -119,9 +119,7 @@ class Tree {
     } else {
       node.isChecked = checkedKeys.includes(nodeKey);
     }
-    node.isLeaf = parentNode
+    node.isLeaf = parentNode ? parentNode.isLeaf : expandKeys.includes(nodeKey);
-      ? parentNode.isLeaf
-      : expandKeys.includes(nodeKey);
     node.isLeaf = nodeIsLeaf;
 
     if (!nodeMap.has(nodeKey)) {

package/document-component/src/document/zh-CN/components/splitPanel.md

@@ -25,6 +25,16 @@
 <script>
 </script>
 
+<style>
+	.lay-split-panel-item{
+		display: flex;
+		font-size: 16px;
+		font-weight: bold;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
+
 :::
 
 ::: title 自定义比例
@@ -36,9 +46,9 @@
 <template>
 <div>
     <lay-split-panel style="height: 300px">
-        <lay-split-panel-item :space="30">1</lay-split-panel-item>
+        <lay-split-panel-item :space="200">1</lay-split-panel-item>
-        <lay-split-panel-item :space="20">2</lay-split-panel-item>
+        <lay-split-panel-item>2</lay-split-panel-item>
-        <lay-split-panel-item :space="50">3</lay-split-panel-item>
+        <lay-split-panel-item :space="200">3</lay-split-panel-item>
     </lay-split-panel>
 </div>
 </template>
@@ -78,13 +88,14 @@
 <template>
 <div>
     <lay-split-panel style="height: 600px;">
-        <lay-split-panel-item :space="60">
+        <lay-split-panel-item :space="300">
             <lay-split-panel :vertical="true" style="height: 600px; width: 100%">
-                <lay-split-panel-item :space="40">1</lay-split-panel-item>
+                <lay-split-panel-item :space="200">1</lay-split-panel-item>
-                <lay-split-panel-item :space="40">2</lay-split-panel-item>
+                <lay-split-panel-item>2</lay-split-panel-item>
             </lay-split-panel>
         </lay-split-panel-item>
-        <lay-split-panel-item :space="40">2</lay-split-panel-item>
+        <lay-split-panel-item>2</lay-split-panel-item>
+        <lay-split-panel-item>2</lay-split-panel-item>
     </lay-split-panel>
 </div>
 </template>
@@ -112,7 +123,7 @@
 
 | 属性  | 描述 | 类型 |可选值 | 默认值|
 | ----- | ---- | ------ | ---| ---|
-| space | 默认每个站多大比例（`%`）, 设置一个，<br/> 其他的都需要设置，合计为（`100` ） | number | - | 按照个数平分 |
+| space | 默认每个占 `px` , 其他的自动平分 | number | - | 按照个数平分 |
 :::
 
 ::: contributor splitPanel