From 41e8565ee4e612ab05c8f8837993a14224bd097d Mon Sep 17 00:00:00 2001
From: agoni1212 <22545824+agoni1212@users.noreply.github.com>
Date: Sat, 26 Jun 2021 20:58:33 +0800
Subject: [PATCH] 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 | 21 ++++++++++++++++++---
 packages/grid-item/index.ts   |  2 ++
 packages/grid-item/index.wxml |  2 +-
 packages/grid/README.md       |  1 +
 packages/grid/index.ts        |  5 +++++
 5 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/packages/grid-item/index.less b/packages/grid-item/index.less
index 289aa122..517b06e9 100644
--- a/packages/grid-item/index.less
+++ b/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;
       }
     }
 
diff --git a/packages/grid-item/index.ts b/packages/grid-item/index.ts
index 3a8f535d..108a7089 100644
--- a/packages/grid-item/index.ts
+++ b/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,
diff --git a/packages/grid-item/index.wxml b/packages/grid-item/index.wxml
index 175f216a..e95087d8 100644
--- a/packages/grid-item/index.wxml
+++ b/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 }}">
diff --git a/packages/grid/README.md b/packages/grid/README.md
index f1f1c596..1c45f1f1 100644
--- a/packages/grid/README.md
+++ b/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 外部样式类
diff --git a/packages/grid/index.ts b/packages/grid/index.ts
index c45bcfc5..0fa96bcc 100644
--- a/packages/grid/index.ts
+++ b/packages/grid/index.ts
@@ -41,6 +41,11 @@ VantComponent({
       type: String,
       observer: 'updateChildren',
     },
+    reverse: {
+      type: Boolean,
+      value: false,
+      observer: 'updateChildren',
+    },
   },
 
   methods: {