feat: 宫格布局适配小程序

components/pi-grid-item/index.vue

@@ -2,7 +2,7 @@
   <view
     class="pi-grid-item"
     :style="[customStyle, itemStyle]"
-    :class="[{ border: getBorder }, customClass]"
+    :class="[{ border: getBorder, gap: getGap }, customClass]"
     :hover-class="hoverClass"
     :hover-start-time="hoverStartTime"
     :hover-stay-time="hoverStayTime"
@@ -23,6 +23,10 @@ const { gridItem } = getConfig()
 export default {
   name: TAG,
   props: {
+    // 当前宫格索引
+    index: {
+      type: [Number, String]
+    },
     // 自定义样式，对象形式（默认值：{}）
     customStyle: {
       type: Object,
@@ -37,6 +41,11 @@ export default {
         return gridItem.customClass
       }
     },
+    // 分成几列
+    col: {
+      type: [Number, String],
+      default: gridItem.col
+    },
     // 宫格是否以正方形撑开
     square: {
       type: Boolean,
@@ -47,6 +56,16 @@ export default {
       type: Boolean,
       default: gridItem.border
     },
+    // 宫格之间间隔，（默认：0）
+    gap: {
+      type: [String, Number],
+      default: gridItem.gap
+    },
+    // 自定义背景色按钮
+    bgColor: {
+      type: String,
+      default: gridItem.bgColor
+    },
     // 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
     hoverClass: {
       type: String,
@@ -70,11 +89,18 @@ export default {
     }
   },
   computed: {
+    getGap() {
+      return this.piGrid ? this.piGrid.gap : this.gap
+    },
     getCol() {
-      return this.piGrid && this.piGrid.col ? this.piGrid.col : 1
+      const col = this.piGrid && this.piGrid.col ? this.piGrid.col : this.col
+      return parseInt(col, 10)
+    },
+    getRowGapWidth() {
+      return this.$pi.common.addUnit(this.getGap * (this.getCol - 1))
     },
     width() {
-      return parseFloat(100 / this.getCol).toFixed(5) + '%'
+      return `calc((100% - ${this.getRowGapWidth}) / ${this.getCol})`
     },
     getSquare() {
       return this.piGrid ? this.piGrid.square : this.square
@@ -83,13 +109,32 @@ export default {
       return this.piGrid ? this.piGrid.border : this.border
     },
     itemStyle() {
-      return { width: this.width }
+      const gap = this.$pi.common.addUnit(this.getGap)
+      const style = {
+        width: this.width,
+        marginRight: gap,
+        marginBottom: gap
+      }
+      // 如果设置了index，并且是列数的最后一行，则不设置marginRight
+      if (this.index && (this.index + 1) % this.getCol === 0) {
+        style.marginRight = 0
+      }
+      if (this.bgColor) style.backgroundColor = this.bgColor
+      return style
     }
   },
   inject: {
     piGrid: { default: undefined }
   },
+  created() {
+    this.valid()
+  },
   methods: {
+    valid() {
+      if (this.getGap && this.index === undefined) {
+        console.warn(TAG, '当设置gap的时候，请把当前迭代器的索引传递到index属性，否则宽度计算有误')
+      }
+    },
     handleItemClick(e) {
       this.$emit('tap', e)
       this.$emit('click', e)
@@ -102,6 +147,7 @@ export default {
 @import '~@/piui/scss/border.scss';
 
 .pi-grid-item {
+  display: inline-block;
   &.border {
     @include pi-border;
     &::after {
@@ -110,6 +156,13 @@ export default {
       border-right-width: $pi-grid-border-width;
       border-bottom-width: $pi-grid-border-width;
     }
+    &.gap::after {
+      // 如果有间隔的情况下（边框全部生成）
+      border-width: $pi-grid-border-width;
+    }
+  }
+  .grid-item-box {
+    display: inline-block;
   }
 }
 </style>

components/pi-grid/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="pi-grid" :style="[customStyle]" :class="[{ border }, customClass]">
+  <view class="pi-grid" :style="[customStyle]" :class="[{ border: showBorder }, customClass]">
     <slot />
   </view>
 </template>
@@ -42,6 +42,11 @@ export default {
       type: Boolean,
       default: grid.border
     },
+    // 宫格之间间隔，（默认：0）
+    gap: {
+      type: [String, Number],
+      default: grid.gap
+    },
     // 宫格对齐方式，靠左，居中，还是靠右
     align: {
       type: String,
@@ -57,6 +62,11 @@ export default {
     return {
       piGrid: this
     }
+  },
+  computed: {
+    showBorder() {
+      return this.border && !this.gap
+    }
   }
 }
 </script>
@@ -65,14 +75,11 @@ export default {
 @import '~@/piui/scss/border.scss';
 
 .pi-grid {
-  display: flex;
-  flex-wrap: wrap;
-
+  width: 100%;
   &.border {
     @include pi-border;
     &::after {
       border: 0 solid $pi-grid-border-color;
-      // 只生成右下边框
       border-top-width: $pi-grid-border-width;
       border-left-width: $pi-grid-border-width;
     }

config/grid.js

@@ -2,6 +2,7 @@ export default {
   customClass: '', // 自定义样式类，字符串形式（''）
   customStyle: {}, // 自定义样式，对象形式（默认值：{}）
   col: 5, // 一行几列（平分宽度）
+  gap: 0, // 宫格之间间隔，（默认：0）
   square: false, // 宫格是否以正方形撑开
   border: true, // 是否显示边框（边框宽度，颜色通过scss变量声明，如需单独定制，请使用::v-deep）
   align: 'left', // 宫格对齐方式，靠左，居中，还是靠右

config/gridItem.js

@@ -1,8 +1,11 @@
 export default {
   customClass: '', // 自定义样式类，字符串形式（''）
   customStyle: {}, // 自定义样式，对象形式（默认值：{}）
+  col: 5, // 一行几列（平分宽度）
   square: false, // 宫格是否以正方形撑开
   border: true, // 是否显示边框（边框宽度，颜色通过scss变量声明，如需单独定制，请使用::v-deep）
+  gap: 0, // 宫格之间间隔，（默认：0）
+  bgColor: '', // 宫格背景色
   hoverClass: 'pi-hover-class', // 宫格按压时的样式类，"none"为无效果
   hoverStartTime: 50, // 按住后多久出现点击态，单位毫秒
   hoverStayTime: 400 // 手指松开后点击态保留时间，单位毫秒