feat(grid): add new prop direction (#3192)

fix #3180

example/pages/grid/index.wxml

@@ -30,6 +30,12 @@
   </van-grid>
 </demo-block>
 
+<demo-block title="内容横排">
+  <van-grid direction="horizontal" column-num="3">
+    <van-grid-item icon="photo-o" text="文字" wx:for="{{ array3 }}" wx:key="*this" />
+  </van-grid>
+</demo-block>
+
 <demo-block title="页面跳转">
   <van-grid clickable column-num="2">
     <van-grid-item icon="home-o" link-type="navigateTo" url="/pages/dashboard/index" text="Navigate 跳转" />
@@ -37,7 +43,7 @@
   </van-grid>
 </demo-block>
 
-<demo-block title="提示信息">
+<demo-block title="徽标提示">
   <van-grid column-num="2">
     <van-grid-item icon="home-o" text="文字" dot />
     <van-grid-item icon="search" text="文字" info="99+" />

packages/grid-item/index.less

@@ -41,13 +41,26 @@
       left: 0;
     }
 
+    &--horizontal {
+      flex-direction: row;
+
+      .van-grid-item__icon + .van-grid-item__text {
+        margin-top: 0;
+        margin-left: @padding-xs;
+      }
+    }
+
     &--clickable:active {
       .theme(background-color, '@grid-item-content-active-color');
     }
   }
 
   &__icon {
+    display: flex;
+    align-items: center;
+
     .theme(font-size, '@grid-item-icon-size');
+    .theme(height, '@grid-item-icon-size');
   }
 
   &__text {

packages/grid-item/index.ts

@@ -36,7 +36,15 @@ VantComponent({
       }
 
       const { data, children } = this.parent;
-      const { columnNum, border, square, gutter, clickable, center } = data;
+      const {
+        columnNum,
+        border,
+        square,
+        gutter,
+        clickable,
+        center,
+        direction,
+      } = data;
       const width = `${100 / columnNum}%`;
 
       const styleWrapper = [];
@@ -76,6 +84,7 @@ VantComponent({
         square,
         gutter,
         clickable,
+        direction,
       });
     },
 

packages/grid-item/index.wxml

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

packages/grid/index.ts

@@ -37,6 +37,10 @@ VantComponent({
       value: true,
       observer: 'updateChildren',
     },
+    direction: {
+      type: String,
+      observer: 'updateChildren',
+    },
   },
 
   data: {