fix(Grid): info、dot prop not work when use icon slot (#4902)

src/grid-item/index.js

@@ -2,6 +2,7 @@ import { createNamespace, addUnit } from '../utils';
 import { BORDER } from '../utils/constant';
 import { ChildrenMixin } from '../mixins/relation';
 import { route, routeProps } from '../utils/router';
+import Info from '../info';
 import Icon from '../icon';
 
 const [createComponent, bem] = createNamespace('grid-item');
@@ -61,7 +62,32 @@ export default createComponent({
       route(this.$router, this);
     },
 
-    renderContent() {
+    genIcon() {
+      const iconSlot = this.slots('icon');
+
+      if (iconSlot) {
+        return (
+          <div class={bem('icon-wrapper')}>
+            {iconSlot}
+            <Info dot={this.dot} info={this.info} />
+          </div>
+        );
+      }
+
+      if (this.icon) {
+        return (
+          <Icon
+            name={this.icon}
+            dot={this.dot}
+            info={this.info}
+            size={this.parent.iconSize}
+            class={bem('icon')}
+          />
+        );
+      }
+    },
+
+    genContent() {
       const slot = this.slots();
 
       if (slot) {
@@ -69,16 +95,7 @@ export default createComponent({
       }
 
       return [
-        this.slots('icon') ||
-          (this.icon && (
-            <Icon
-              name={this.icon}
-              dot={this.dot}
-              info={this.info}
-              size={this.parent.iconSize}
-              class={bem('icon')}
-            />
-          )),
+        this.genIcon(),
         this.slots('text') || (this.text && <span class={bem('text')}>{this.text}</span>)
       ];
     }
@@ -104,7 +121,7 @@ export default createComponent({
           ]}
           onClick={this.onClick}
         >
-          {this.renderContent()}
+          {this.genContent()}
         </div>
       </div>
     );

src/grid-item/index.less

@@ -48,6 +48,10 @@
     font-size: @grid-item-icon-size;
   }
 
+  &__icon-wrapper {
+    position: relative;
+  }
+
   &__text {
     color: @grid-item-text-color;
     font-size: @grid-item-text-font-size;

src/grid/test/__snapshots__/index.spec.js.snap

@@ -9,6 +9,19 @@ exports[`icon-size prop 1`] = `
 </div>
 `;
 
+exports[`render icon-slot 1`] = `
+<div class="van-grid van-hairline--top">
+  <div class="van-grid-item" style="flex-basis: 25%;">
+    <div class="van-grid-item__content van-grid-item__content--center van-hairline">
+      <div class="van-grid-item__icon-wrapper">
+        <div></div>
+        <div class="van-info">1</div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`sqaure and set gutter 1`] = `
 <div class="van-grid" style="padding-left: 10rem;">
   <div class="van-grid-item van-grid-item--square" style="flex-basis: 50%; padding-top: 50%;">

src/grid/test/index.spec.js

@@ -50,3 +50,17 @@ test('icon-size prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('render icon-slot', () => {
+  const wrapper = mount({
+    template: `
+      <van-grid icon-size="10">
+        <van-grid-item info="1">
+          <div slot="icon" />
+        </van-grid-item>
+      </van-grid>
+    `
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});