feat: add Grid

Author: pengshanglong

src/components/grid/index.jsx

@@ -0,0 +1,117 @@
+import classNames from 'classnames'
+import _chunk from 'lodash/chunk'
+
+export default {
+  name: 'Grid',
+  props: {
+    mode: {
+      type: String,
+      default: 'square',
+      validator: (val) => ['rect', 'square'].includes(val),
+    },
+    hasBorder: {
+      type: Boolean,
+      default: true,
+    },
+    onClick: {
+      type: Function,
+      default: () => () => {},
+    },
+    columnNum: {
+      type: Number,
+      default: 3,
+    },
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    className: {
+      type: [Object, String],
+      default: '',
+    },
+  },
+  methods: {
+    /**
+     *
+     * @param {AtGridItem} item
+     * @param {number} index
+     * @param {number} row
+     * @param {event} event
+     */
+    handleClick(item, index, row, event) {
+      const { onClick, columnNum } = this.props
+      if (typeof onClick === 'function') {
+        const clickIndex = row * columnNum + index
+        onClick(item, clickIndex, event)
+      }
+    },
+  },
+  render() {
+    const { data, mode, columnNum, hasBorder } = this
+
+    if (Array.isArray(data) && data.length === 0) {
+      return null
+    }
+
+    const gridGroup = _chunk(data, columnNum)
+
+    const bodyClass = classNames(['at-grid__flex-item', 'at-grid-item', `at-grid-item--${mode}`], {
+      'at-grid-item--no-border': !hasBorder,
+    })
+
+    return (
+      <view class={classNames('at-grid', this.className)}>
+        {gridGroup.map((item, i) => (
+          <view class="at-grid__flex" key={`at-grid-group-${i}`}>
+            {item.map((childItem, index) => (
+              <view
+                key={`at-grid-item-${index}`}
+                class={classNames(bodyClass, {
+                  'at-grid-item--last': index === columnNum - 1,
+                })}
+                onClick={this.handleClick.bind(this, childItem, index, i)}
+                style={{
+                  flex: `0 0 ${100 / columnNum}%`,
+                }}>
+                <view class="at-grid-item__content">
+                  <view class="at-grid-item__content-inner">
+                    <view class="content-inner__icon">
+                      {childItem.image && (
+                        <image
+                          class="content-inner__img"
+                          src={childItem.image}
+                          mode="scaleToFill"
+                        />
+                      )}
+                      {childItem.iconInfo && !childItem.image && (
+                        <view
+                          class={classNames(
+                            childItem.iconInfo.prefixClass || 'at-icon',
+                            {
+                              [`${childItem.iconInfo.prefixClass || 'at-icon'}-${
+                                childItem.iconInfo.value
+                              }`]: childItem.iconInfo.value,
+                            },
+                            childItem.iconInfo.className
+                          )}
+                          style={this.$mergeStyle(
+                            {
+                              color: childItem.iconInfo.color,
+                              fontSize: `${childItem.iconInfo.size || 24}px`,
+                            },
+                            childItem.iconInfo.customStyle
+                          )}
+                        />
+                      )}
+                    </view>
+                    <view class="content-inner__text">{childItem.value}</view>
+                  </view>
+                </view>
+              </view>
+            ))}
+          </view>
+        ))}
+      </view>
+    )
+  },
+}

src/components/index.ts

@@ -0,0 +1,3 @@
+import Grid from './grid/index'
+
+export { Grid }

src/pages/index/index.vue

@@ -2,6 +2,24 @@
   <view 
     class="index"
   >
+    <Grid
+      mode="square"
+      :data="gridData"
+    />
+    <view class="at-row">
+      <view class="at-col at-col-3">
+        A
+      </view>
+      <view class="at-col at-col-6">
+        B
+      </view>
+      <view class="at-col at-col-2">
+        C
+      </view>
+      <view class="at-col at-col-1">
+        D
+      </view>
+    </view>
     <Message />
     <button @tap="showMessage">
       show Message
@@ -164,6 +182,7 @@ import ModalAction  from '../../components/modal/action/index.jsx'
 import Toast from '../../components/toast/index.jsx'
 import SwipeAction from '../../components/swipe-action/index.jsx'
 import Message from '../../components/message/index.jsx'
+import { Grid } from '../../components/index'
 
 export default {
   name: 'Index',
@@ -190,6 +209,7 @@ export default {
     Toast,
     SwipeAction,
     Message,
+    Grid,
   },
   data() {
     return {
@@ -208,7 +228,33 @@ export default {
             backgroundColor: '#FF4949'
           }
         }
-      ]
+      ],
+      gridData: [
+    {
+      image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
+      value: '领取中心'
+    },
+    {
+      image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
+      value: '找折扣'
+    },
+    {
+      image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
+      value: '领会员'
+    },
+    {
+      image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
+      value: '新品首发'
+    },
+    {
+      image: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png',
+      value: '领京豆'
+    },
+    {
+      image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
+      value: '手机馆'
+    }
+  ]
     }
   },
   methods: {