mirror of https://github.com/ElemeFE/element
commit
6e124fc24b
|
@ -44,6 +44,7 @@
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"async-validator": "^1.6.6",
|
"async-validator": "^1.6.6",
|
||||||
|
"babel-helper-vue-jsx-merge-props": "^2.0.0",
|
||||||
"deepmerge": "^1.2.0",
|
"deepmerge": "^1.2.0",
|
||||||
"throttle-debounce": "^1.0.1",
|
"throttle-debounce": "^1.0.1",
|
||||||
"vue-popup": "^0.2.12",
|
"vue-popup": "^0.2.12",
|
||||||
|
@ -55,7 +56,6 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-cli": "^6.14.0",
|
"babel-cli": "^6.14.0",
|
||||||
"babel-core": "^6.14.0",
|
"babel-core": "^6.14.0",
|
||||||
"babel-helper-vue-jsx-merge-props": "^2.0.0",
|
|
||||||
"babel-loader": "^6.2.5",
|
"babel-loader": "^6.2.5",
|
||||||
"babel-plugin-module-resolver": "^2.2.0",
|
"babel-plugin-module-resolver": "^2.2.0",
|
||||||
"babel-plugin-syntax-jsx": "^6.8.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