feat(Grid): add reverse prop (#4280)

* Update index.ts

* doc(Grid): add reverse prop

* feat(GridItem): reverse prop

* Update index.wxml

* Update index.less

* Update index.less

* Update style

packages/grid-item/index.less

@@ -43,10 +43,25 @@
 
     &--horizontal {
       flex-direction: row;
+      
+      .van-grid-item__text {
+        margin: 0 0 0 @padding-xs;
+      }
+    }
+    
+    &--reverse {
+      flex-direction: column-reverse;
 
-      .van-grid-item__icon + .van-grid-item__text {
-        margin-top: 0;
-        margin-left: @padding-xs;
+      .van-grid-item__text {
+        margin: 0 0 @padding-xs;
+      }
+    }
+
+    &--horizontal&--reverse {
+      flex-direction: row-reverse;
+
+      .van-grid-item__text {
+        margin: 0 @padding-xs 0 0;
       }
     }
 

packages/grid-item/index.ts

@@ -43,6 +43,7 @@ VantComponent({
         clickable,
         center,
         direction,
+        reverse,
         iconSize,
       } = data;
 
@@ -53,6 +54,7 @@ VantComponent({
         gutter,
         clickable,
         direction,
+        reverse,
         iconSize,
         index: children.indexOf(this),
         columnNum,

packages/grid-item/index.wxml

@@ -7,7 +7,7 @@
   bindtap="onClick"
 >
   <view
-    class="content-class {{ utils.bem('grid-item__content', [direction, { center, square, clickable, surround: border && gutter }]) }} {{ border ? 'van-hairline--surround' : '' }}"
+    class="content-class {{ utils.bem('grid-item__content', [direction, { center, square, reverse, clickable, surround: border && gutter }]) }} {{ border ? 'van-hairline--surround' : '' }}"
     style="{{ computed.contentStyle({ square, gutter }) }}"
   >
     <block wx:if="{{ useSlot }}">

packages/grid/README.md

@@ -135,6 +135,7 @@
 | square | 是否将格子固定为正方形 | _boolean_ | `false` | - |
 | clickable | 是否开启格子点击反馈 | _boolean_ | `false` | - |
 | direction | 格子内容排列的方向，可选值为 `horizontal` | _string_ | `vertical` | - |
+| reverse `v1.7.0` | 是否调换图标和文本的位置 | _boolean_ | `false` |
 | use-slot | 是否使用自定义内容的插槽 | _boolean_ | `false` |
 
 ### Grid 外部样式类

packages/grid/index.ts

@@ -41,6 +41,11 @@ VantComponent({
       type: String,
       observer: 'updateChildren',
     },
+    reverse: {
+      type: Boolean,
+      value: false,
+      observer: 'updateChildren',
+    },
   },
 
   methods: {