feat(Grid): add new external class custom-class content-class icon-class text-class (#2882)

fix #2880

packages/grid-item/index.ts

@@ -9,6 +9,8 @@ VantComponent({
     current: 'grid-item',
   },
 
+  classes: ['content-class', 'icon-class', 'text-class'],
+
   mixins: [link],
 
   props: {

packages/grid-item/index.wxml

@@ -1,19 +1,19 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
-<view class="{{ utils.bem('grid-item', { square }) }}" style="{{ viewStyle }}" bindtap="onClick">
+<view class="custom-class {{ utils.bem('grid-item', { square }) }}" style="{{ viewStyle }}" bindtap="onClick">
   <view
-    class="{{ utils.bem('grid-item__content', { center, square, clickable, surround: border && gutter }) }} {{ border ? 'van-hairline--surround' : '' }}"
+    class="content-class {{ utils.bem('grid-item__content', { center, square, clickable, surround: border && gutter }) }} {{ border ? 'van-hairline--surround' : '' }}"
     style="{{ contentStyle }}"
   >
     <block wx:if="{{ useSlot }}">
       <slot />
     </block>
     <block wx:else>
-      <view class="van-grid-item__icon">
+      <view class="van-grid-item__icon icon-class">
         <van-icon wx:if="{{ icon }}" name="{{ icon }}" dot="{{ dot }}" info="{{ info }}" />
         <slot wx:else name="icon"></slot>
       </view>
-      <view class="van-grid-item__text">
+      <view class="van-grid-item__text text-class">
         <text wx:if="{{ text }}">{{ text }}</text>
         <slot wx:else name="text"></slot>
       </view>

packages/grid/README.md

@@ -123,6 +123,12 @@
 | clickable  | 是否开启格子点击反馈 | *boolean* | `false` | - |
 | use-slot | 是否使用自定义内容的插槽 | *boolean* | `false` |
 
+### Grid 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |
+
 ### GridItem Props
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -147,3 +153,12 @@
 | - | 自定义宫格的所有内容，需要设置`use-slot`属性 |
 | icon | 自定义图标，如果设置了`use-slot`或者`icon`属性则不生效 |
 | text | 自定义文字，如果设置了`use-slot`或者`text`属性则不生效 |
+
+### GridItem 外部样式类
+
+| 类名 | 说明 |
+|-----------|-----------|
+| custom-class | 根节点样式类 |
+| content-class | 内容样式类 |
+| icon-class | 图标样式类 |
+| text-class | 文本样式类 |

packages/grid/index.wxml

@@ -1,3 +1,3 @@
-<view class="van-grid {{ border && !gutter ? 'van-hairline--top' : '' }}" style="{{ viewStyle }}">
+<view class="van-grid custom-class {{ border && !gutter ? 'van-hairline--top' : '' }}" style="{{ viewStyle }}">
   <slot />
 </view>