mirror of https://github.com/ElemeFE/element
80 lines
1.6 KiB
Vue
80 lines
1.6 KiB
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>
|