support Grid
support Grid
This commit is contained in:
parent
1843ff3b8c
commit
c755733a9c
9 changed files with 49 additions and 34 deletions
71
src/components/grid/col.vue
Normal file
71
src/components/grid/col.vue
Normal file
|
@ -0,0 +1,71 @@
|
|||
<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>
|
Loading…
Add table
Add a link
Reference in a new issue