Col: remove vue jsx spread

pull/1096/head
qingwei.li 2016-11-16 12:07:27 +08:00
parent 0013043ad7
commit 60dfd8df47
3 changed files with 72 additions and 80 deletions

View File

@ -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.10",
@ -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",

71
packages/col/src/col.js Normal file
View File

@ -0,0 +1,71 @@
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>
);
}
};

View File

@ -1,79 +0,0 @@
<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>