Merge pull request #269 from lanniuniu/develop

fix: 兼容ie grid组件 增加属性row-gap

src/grid/row.tsx

@@ -2,12 +2,21 @@ import Vue, { VNode } from 'vue';
 import isObject from 'lodash/isObject';
 import { prefix } from '../config';
 import props from './row-props';
-import { ClassName } from '../common';
+import { ClassName, Styles } from '../common';
 import { calcSize } from '../utils/responsive';
 import { TdRowProps } from './type';
+import { getIEVersion } from '../utils/helper';
 
 const name = `${prefix}-row`;
 
+export interface RowHTMLTagAttributes {
+  class: ClassName;
+  style: Styles;
+  attrs?: {
+    'row-gap'?: number;
+  }
+}
+
 export default Vue.extend({
   name: 'TRow',
 
@@ -53,7 +62,7 @@ export default Vue.extend({
       this.size = calcSize(window.innerWidth);
     },
 
-    calcRowStyle(gutter: TdRowProps['gutter'], currentSize: string): object {
+    calcRowStyle(gutter: TdRowProps['gutter'], currentSize: string): Styles {
       const rowStyle = {};
       if (typeof gutter === 'number') {
         Object.assign(rowStyle, {
@@ -96,13 +105,39 @@ export default Vue.extend({
       }
       return rowStyle;
     },
+
+    rowGap(gutter: TdRowProps['gutter'], currentSize: string): number {
+      let rowGap;
+      if (Array.isArray(gutter) && gutter.length) {
+        if (typeof gutter[1] === 'number') {
+          [, rowGap] = gutter;
+        }
+        if (isObject(gutter[1]) && gutter[1][currentSize] !== undefined) {
+          rowGap = gutter[1][currentSize];
+        }
+      } else if (isObject(gutter) && gutter[currentSize]) {
+        if (Array.isArray(gutter[currentSize]) && gutter[currentSize].length) {
+          [, rowGap] = gutter[currentSize];
+        }
+      }
+      return rowGap;
+    },
   },
 
   render(): VNode {
     const { tag, classes } = this;
 
     const rowStyle = this.calcRowStyle(this.gutter, this.size);
 
-    return <tag class={classes} style={rowStyle}>{this.$slots.default}</tag>;
+    const attributes: RowHTMLTagAttributes = {
+      class: classes,
+      style: rowStyle,
+      attrs: {},
+    };
+    if (getIEVersion() <= 9) {
+      const rowGap = this.rowGap(this.gutter, this.size);
+      attributes.attrs['row-gap'] = rowGap;
+    }
+    return <tag {...attributes}>{this.$slots.default}</tag>;
   },
 });