fix(Grid): 修复组件体验问题

扩大 grid-item 组件点击范围，将 hover 效果移入 grid-item 组件

Author: murongg

src/grid-item/index.js

@@ -1,3 +1,5 @@
+import dataUtil from '../core/utils/data-util';
+
 Component({
   relations: {
     '../grid/index': {
@@ -14,6 +16,7 @@ Component({
   },
   data: {
     index:0,
+    isHover: true
   },
   attached() {
 
@@ -32,8 +35,11 @@ Component({
   },
 
   lifetimes: {
-    show() {
-
+    ready() {
+      const parent = this.getRelationNodes('../grid/index')[0];
+      if(parent) {
+        dataUtil.setDiffData(this, { isHover: parent.data.isHover });
+      }
     },
   },
   methods: {

src/grid-item/index.less

@@ -1,8 +1,10 @@
 .grid-item {
-    max-width: initial;
-    max-height: initial;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
+}
+
+.l-gird-item-hover {
+    opacity: .8;
 }

src/grid-item/index.wxml

@@ -1,3 +1,9 @@
-<view class="l-grid-item l-grid-item-class grid-item" mut-bind:tap="tapGridItem">
+<view 
+    hover-class="{{isHover?'l-gird-item-hover':''}}"
+    hover-start-time="20"
+    hover-stay-time="50"
+    class="l-grid-item l-grid-item-class grid-item" 
+    mut-bind:tap="tapGridItem"
+>
     <slot></slot>
 </view>

src/grid/index.less

@@ -5,8 +5,6 @@
 
     .l-grid-item {
         display: flex;
-        justify-content: center;
-        align-items: center;
         flex-direction: column;
         text-align: center;
         box-sizing: border-box;
@@ -23,7 +21,3 @@
     }
 
 }
-
-.l-gird-hover{
-    opacity: .8;
-}

src/grid/index.wxml

@@ -1,11 +1,10 @@
 <view class="l-grid l-class" mut-bind:tap="tapGrid">
-    <view mut-bind:tap="tapGridItem"
-          hover-class="{{isHover?'l-gird-hover':''}}"
-          hover-start-time="20"
-          hover-stay-time="50"
-          data-grid-index="{{item.index}}"
-          class="l-grid-item l-class-grid l-grid-class {{index%rowNum !== rowNum-1 &&(showBorder||showColBorder) ? 'side-grid':''}} {{(index<gridItems.length-(gridItems.length%rowNum||rowNum)) &&(showBorder||showRowBorder)? 'center-grid':''}}" wx:for="{{gridItems}}" wx:key="key"
-          style="min-width:{{100/rowNum}}%;">
+    <view 
+        mut-bind:tap="tapGridItem"
+        data-grid-index="{{item.index}}"
+        class="l-grid-item l-class-grid l-grid-class {{index%rowNum !== rowNum-1 &&(showBorder||showColBorder) ? 'side-grid':''}} {{(index<gridItems.length-(gridItems.length%rowNum||rowNum)) &&(showBorder||showRowBorder)? 'center-grid':''}}" wx:for="{{gridItems}}" wx:key="key"
+        style="min-width:{{100/rowNum}}%;"
+    >
         <slot name="{{item.key}}"></slot>
     </view>
 </view>