71 lines
2.3 KiB
Vue
71 lines
2.3 KiB
Vue
<template>
|
|
<div :class="classes" :style="styles">
|
|
<slot></slot>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
const prefixCls = 'ivu-col';
|
|
|
|
export default {
|
|
props: {
|
|
span: [Number, String],
|
|
order: [Number, String],
|
|
offset: [Number, String],
|
|
push: [Number, String],
|
|
pull: [Number, String],
|
|
className: String,
|
|
xs: [Number, Object],
|
|
sm: [Number, Object],
|
|
md: [Number, Object],
|
|
lg: [Number, Object]
|
|
},
|
|
data () {
|
|
return {
|
|
gutter: 0
|
|
};
|
|
},
|
|
computed: {
|
|
classes () {
|
|
let classList = [
|
|
`${prefixCls}`,
|
|
{
|
|
[`${prefixCls}-span-${this.span}`]: this.span,
|
|
[`${prefixCls}-order-${this.order}`]: this.order,
|
|
[`${prefixCls}-offset-${this.offset}`]: this.offset,
|
|
[`${prefixCls}-push-${this.push}`]: this.push,
|
|
[`${prefixCls}-pull-${this.pull}`]: this.pull,
|
|
[`${this.className}`]: !!this.className
|
|
}
|
|
];
|
|
|
|
['xs', 'sm', 'md', 'lg'].forEach(size => {
|
|
if (typeof this[size] === 'number') {
|
|
classList.push(`${prefixCls}-span-${size}-${this[size]}`);
|
|
} else if (typeof this[size] === 'object') {
|
|
let props = this[size];
|
|
Object.keys(props).forEach(prop => {
|
|
classList.push(
|
|
prop !== 'span'
|
|
? `${prefixCls}-${size}-${prop}-${props[prop]}`
|
|
: `${prefixCls}-span-${size}-${props[prop]}`
|
|
);
|
|
});
|
|
}
|
|
});
|
|
|
|
return classList;
|
|
},
|
|
styles () {
|
|
let style = {};
|
|
if (this.gutter !== 0) {
|
|
style = {
|
|
paddingLeft: this.gutter / 2 + 'px',
|
|
paddingRight: this.gutter / 2 + 'px'
|
|
};
|
|
}
|
|
|
|
return style;
|
|
}
|
|
}
|
|
};
|
|
</script>
|