Merge pull request #1096 from QingWei-Li/fix/col

Col: remove vue jsx spread

package.json

@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "async-validator": "^1.6.6",
+    "babel-helper-vue-jsx-merge-props": "^2.0.0",
     "deepmerge": "^1.2.0",
     "throttle-debounce": "^1.0.1",
     "vue-popup": "^0.2.12",
@@ -55,7 +56,6 @@
   "devDependencies": {
     "babel-cli": "^6.14.0",
     "babel-core": "^6.14.0",
-    "babel-helper-vue-jsx-merge-props": "^2.0.0",
     "babel-loader": "^6.2.5",
     "babel-plugin-module-resolver": "^2.2.0",
     "babel-plugin-syntax-jsx": "^6.8.0",

packages/col/src/col.js

+export default {
+  name: 'ElCol',
+
+  props: {
+    span: {
+      type: Number,
+      default: 24
+    },
+    offset: Number,
+    pull: Number,
+    push: Number,
+    xs: [Number, Object],
+    sm: [Number, Object],
+    md: [Number, Object],
+    lg: [Number, Object]
+  },
+
+  computed: {
+    gutter() {
+      return this.$parent.gutter;
+    },
+
+    style() {
+      var ret = {};
+
+      if (this.gutter) {
+        ret.paddingLeft = this.gutter / 2 + 'px';
+        ret.paddingRight = ret.paddingLeft;
+      }
+
+      return ret;
+    }
+  },
+  render(h) {
+    let { style } = this;
+    let classList = [];
+
+    ['span', 'offset', 'pull', 'push'].forEach(prop => {
+      if (this[prop]) {
+        classList.push(
+          prop !== 'span'
+          ? `el-col-${prop}-${this[prop]}`
+          : `el-col-${this[prop]}`
+        );
+      }
+    });
+
+    ['xs', 'sm', 'md', 'lg'].forEach(size => {
+      if (typeof this[size] === 'number') {
+        classList.push(`el-col-${size}-${this[size]}`);
+      } else if (typeof this[size] === 'object') {
+        let props = this[size];
+        Object.keys(props).forEach(prop => {
+          classList.push(
+            prop !== 'span'
+            ? `el-col-${size}-${prop}-${props[prop]}`
+            : `el-col-${size}-${props[prop]}`
+          );
+        });
+      }
+    });
+
+    return (
+      <div
+        class={['el-col', classList]}
+        style={style}>
+        {this.$slots.default}
+      </div>
+    );
+  }
+};

packages/col/src/col.vue

-<script>
-  export default {
-    name: 'ElCol',
-
-    props: {
-      span: {
-        type: Number,
-        default: 24
-      },
-      offset: Number,
-      pull: Number,
-      push: Number,
-      xs: [Number, Object],
-      sm: [Number, Object],
-      md: [Number, Object],
-      lg: [Number, Object]
-    },
-
-    computed: {
-      gutter() {
-        return this.$parent.gutter;
-      },
-
-      style() {
-        var ret = {};
-
-        if (this.gutter) {
-          ret.paddingLeft = this.gutter / 2 + 'px';
-          ret.paddingRight = ret.paddingLeft;
-        }
-
-        return ret;
-      }
-    },
-    render(h) {
-      let { style } = this;
-      let classList = [];
-
-      ['span', 'offset', 'pull', 'push'].forEach(prop => {
-        if (this[prop]) {
-          classList.push(
-            prop !== 'span'
-            ? `el-col-${prop}-${this[prop]}`
-            : `el-col-${this[prop]}`
-          );
-        }
-      });
-
-      ['xs', 'sm', 'md', 'lg'].forEach(size => {
-        if (typeof this[size] === 'number') {
-          classList.push(`el-col-${size}-${this[size]}`);
-        } else if (typeof this[size] === 'object') {
-          let props = this[size];
-          Object.keys(props).forEach(prop => {
-            classList.push(
-              prop !== 'span'
-              ? `el-col-${size}-${prop}-${props[prop]}`
-              : `el-col-${size}-${props[prop]}`
-            );
-          });
-        }
-      });
-
-      const data = {
-        class: classList,
-        style
-      };
-
-      return (
-        <div
-          class="el-col"
-          {...data}
-        >
-          {this.$slots.default}
-        </div>
-      );
-    }
-  };
-</script>