mirror of https://github.com/ElemeFE/element
Col: remove vue jsx spread
parent
0013043ad7
commit
60dfd8df47
|
@ -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",
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
};
|
|
@ -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>
|
Loading…
Reference in New Issue