调整tab图元的按钮宽高的展示逻辑

src/services/defaults.ts

@@ -2897,10 +2897,13 @@ context.meta2d.translate(
         icon: 'l-xuanxiangka',
         data: {
           name: 'tab',
-          width: 500,
-          height: 50,
+          width: 440,
+          height: 48,
           direction: 'horizontal',
           selectedKey: '1',
+          btnHeight: 32,
+          btnWidth: 100,
+          gap:8,
           // selectedKeys: [],
           disableInput: true,
           data: [
@@ -2929,16 +2932,19 @@ context.meta2d.translate(
                 key: 'gap',
                 label: '间隔',
                 type: 'number',
+                min:1
               },
               {
                 key: 'btnWidth',
                 label: '按钮宽度',
                 type: 'number',
+                min:1
               },
               {
                 key: 'btnHeight',
                 label: '按钮高度',
                 type: 'number',
+                min:1
               },
               {
                 key: 'activeBackground',
@@ -2989,12 +2995,15 @@ context.meta2d.translate(
         icon: 'l-duoxiangxuanxiangka',
         data: {
           name: 'tab',
-          width: 500,
-          height: 50,
+          width: 440,
+          height: 48,
           direction: 'horizontal',
           selectedKeys: ['0'],
           multiple:true,
           disableInput: true,
+          btnHeight: 32,
+          btnWidth: 100,
+          gap:8,
           data: [
             { text: '场景一', key: '0' },
             { text: '场景二', key: '1', isForbidden: true },
@@ -3021,16 +3030,19 @@ context.meta2d.translate(
                 key: 'gap',
                 label: '间隔',
                 type: 'number',
+                min:1
               },
               {
                 key: 'btnWidth',
                 label: '按钮宽度',
                 type: 'number',
+                min:1
               },
               {
                 key: 'btnHeight',
                 label: '按钮高度',
                 type: 'number',
+                min:1
               },
               {
                 key: 'activeBackground',

src/views/components/PenDatas.vue

@@ -97,6 +97,8 @@
               :min="item.min"
               @change="changeValue(item.key)"
               :placeholder="item.placeholder"
+              :allowInputOverLimit="false"
+              :decimalPlaces="2"
             />
             <t-color-picker
               class="w-full"

src/views/components/PenProps.vue

@@ -1509,7 +1509,7 @@ onBeforeMount(() => {
   initPenData();
 
   meta2d.on('translatePens', getRect);
-  meta2d.on('resizePens', getRect);
+  meta2d.on('resizePens',detailResizePens);
   meta2d.on('rotatePens', getRect);
 });
 
@@ -1576,7 +1576,27 @@ const watcher = watch(() => selections.pen.id, initPenData);
 const getRect = () => {
   data.rect = meta2d.getPenRect(data.pen);
 };
-
+const detailResizePens = () => {
+  getRect();
+  updateTabBtnData();
+}
+const updateTabBtnData = () => {//更新tab按钮的宽高
+  if(data.pen.name === 'tab') {
+    const len = data.pen.data.length;
+    const gap = data.pen.gap;
+    const {width: w, height: h} = data.rect;
+    let btnWidth = 0, btnHeight = 0;
+    if (data.pen.direction == 'horizontal') {
+      btnWidth = (w - (len + 1) * gap) / len;
+      btnHeight = h - gap * 2;
+    } else  {
+      btnWidth =  w - gap * 2;
+      btnHeight =  (h - (len + 1) * gap) / len;
+    }
+    data.pen.btnWidth = btnWidth;
+    data.pen.btnHeight = btnHeight;
+  }
+}
 const decimalPlaces = (val: number) => {
   if (!val) {
     return 0;
@@ -1792,7 +1812,7 @@ const isDom = computed(() => {
 onUnmounted(() => {
   watcher();
   meta2d.off('translatePens', getRect);
-  meta2d.off('resizePens', getRect);
+  meta2d.off('resizePens', detailResizePens);
   meta2d.off('rotatePens', getRect);
 });
 </script>

src/views/components/pen.ts

@@ -39,20 +39,18 @@ export const updatePen = (pen: any, prop: string, render = true) => {
       v.whiteSpace = 'nowrap';
       pen.whiteSpace = 'nowrap';
     }
-  } else if(pen.name === 'tab' && (prop === 'direction'|| prop === 'btnWidth'|| prop === 'btnHeight')){
-    if(pen.btnHeight) {
-      if (pen.direction == 'vertical') {
-        v.height = pen.btnHeight * pen.data.length + (pen.gap || 8) * (pen.data.length + 1);
-      } else {
-        v.height = pen.btnHeight + (pen.gap || 8) * 2; 
-      }
-    }
-    if(pen.btnWidth) {
-      if (pen.direction == 'vertical') {
-        v.width = pen.btnWidth + (pen.gap || 8) * 2;
-      } else {
-        v.width = pen.btnWidth  * pen.data.length + (pen.gap || 8) * (pen.data.length + 1);
-      }
+  } else if(pen.name === 'tab' && ['direction','btnWidth','btnHeight','gap'].includes(prop)){
+    let {btnHeight, btnWidth, gap, direction, data} = pen;
+    const len = data.length;
+    btnHeight= v.btnHeight = btnHeight || 32;
+    btnWidth = v.btnWidth = btnWidth || 100;
+    gap = v.gap = gap || 8;
+    if (direction == 'vertical') {
+      v.height = btnHeight * len + gap * (len + 1);
+      v.width = btnWidth + gap * 2;
+    } else {
+      v.height = btnHeight + gap * 2; 
+      v.width = btnWidth  * len + gap * (len + 1);
     }
   }
   meta2d.setValue(v, { render });