fix(Grid): fix the border style error when the griditems is not an integer multiple of columns (#3740)

Author: anlyyao

src/grid-item/grid-item.ts

@@ -102,7 +102,7 @@ export default class GridItem extends SuperComponent {
   // 获取应该加在gridWrap上的padding
   getPaddingStyle() {
     const { gutter } = this.parent.properties;
-    if (gutter) return `padding-left:${gutter}rpx;padding-top:${gutter}rpx`;
+    if (gutter) return `padding-bottom:${gutter}rpx;padding-right:${gutter}rpx`;
     return '';
   }
 
@@ -114,7 +114,7 @@ export default class GridItem extends SuperComponent {
     if (!isObject(border)) border = {} as any;
     const { color = '#266FE8', width = 2, style = 'solid' } = border as any;
     if (gutter) return `border:${width}rpx ${style} ${color}`;
-    return `border-top:${width}rpx ${style} ${color};border-left:${width}rpx ${style} ${color}`;
+    return `border-bottom:${width}rpx ${style} ${color};border-right:${width}rpx ${style} ${color}`;
   }
 
   onClick(e) {

src/grid/__test__/index.test.js

@@ -26,13 +26,13 @@ describe('grid', () => {
     comp.attach(document.createElement('parent-wrapper'));
 
     const $content = comp.querySelector('#grid >>> .t-grid__content');
-    expect($content.dom.style.marginLeft).toBe('-4px');
+    expect($content.dom.style.marginRight).toBe('-4px');
 
     comp.setData({ border: true });
-    expect($content.dom.style.marginLeft).toBe('-2px');
+    expect($content.dom.style.marginRight).toBe('-2px');
 
     comp.setData({ border: {} });
-    expect($content.dom.style.marginLeft).toBe('-2px');
+    expect($content.dom.style.marginRight).toBe('-2px');
   });
 
   it(':gutter', () => {
@@ -42,7 +42,7 @@ describe('grid', () => {
     comp.setData({ gutter: 0 });
 
     const $content = comp.querySelector('#grid >>> .t-grid__content');
-    expect($content.dom.style.marginLeft).toBe('-0px');
+    expect($content.dom.style.marginRight).toBe('-0px');
   });
 
   it(':event', async () => {

src/grid/grid.ts

@@ -55,10 +55,10 @@ export default class Grid extends SuperComponent {
       const { gutter } = this.properties;
       let { border } = this.properties;
 
-      if (!border) return `margin-left:-${gutter}rpx; margin-top:-${gutter}rpx`;
+      if (!border) return `margin-bottom:-${gutter}rpx; margin-right:-${gutter}rpx`;
       if (!isObject(border)) border = {} as any;
       const { width = 2 } = border as any;
-      return `margin-left:-${width}rpx; margin-top:-${width}rpx`;
+      return `margin-bottom:-${width}rpx; margin-right:-${width}rpx`;
     },
   };
 }

src/upload/__test__/index.test.js

@@ -152,7 +152,7 @@ describe('upload', () => {
       const $gridItem = comp.querySelector('#t-upload >>> .t-grid-item');
       // gutter = 16, 单位 rpx
       expect($gridContent.dom.getAttribute('style')).toEqual(
-        `margin-left:-${comp.data.gutter}px; margin-top:-${comp.data.gutter}px`,
+        `margin-bottom:-${comp.data.gutter}px; margin-right:-${comp.data.gutter}px`,
       );
 
       // gridConfig: width、 height