1 | export default {
|
2 | name: 'ElCol',
|
3 |
|
4 | props: {
|
5 | span: {
|
6 | type: Number,
|
7 | default: 24
|
8 | },
|
9 | tag: {
|
10 | type: String,
|
11 | default: 'div'
|
12 | },
|
13 | offset: Number,
|
14 | pull: Number,
|
15 | push: Number,
|
16 | xs: [Number, Object],
|
17 | sm: [Number, Object],
|
18 | md: [Number, Object],
|
19 | lg: [Number, Object],
|
20 | xl: [Number, Object]
|
21 | },
|
22 |
|
23 | computed: {
|
24 | gutter() {
|
25 | let parent = this.$parent;
|
26 | while (parent && parent.$options.componentName !== 'ElRow') {
|
27 | parent = parent.$parent;
|
28 | }
|
29 | return parent ? parent.gutter : 0;
|
30 | }
|
31 | },
|
32 | render(h) {
|
33 | let classList = [];
|
34 | let style = {};
|
35 |
|
36 | if (this.gutter) {
|
37 | style.paddingLeft = this.gutter / 2 + 'px';
|
38 | style.paddingRight = style.paddingLeft;
|
39 | }
|
40 |
|
41 | ['span', 'offset', 'pull', 'push'].forEach(prop => {
|
42 | if (this[prop] || this[prop] === 0) {
|
43 | classList.push(
|
44 | prop !== 'span'
|
45 | ? `el-col-${prop}-${this[prop]}`
|
46 | : `el-col-${this[prop]}`
|
47 | );
|
48 | }
|
49 | });
|
50 |
|
51 | ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {
|
52 | if (typeof this[size] === 'number') {
|
53 | classList.push(`el-col-${size}-${this[size]}`);
|
54 | } else if (typeof this[size] === 'object') {
|
55 | let props = this[size];
|
56 | Object.keys(props).forEach(prop => {
|
57 | classList.push(
|
58 | prop !== 'span'
|
59 | ? `el-col-${size}-${prop}-${props[prop]}`
|
60 | : `el-col-${size}-${props[prop]}`
|
61 | );
|
62 | });
|
63 | }
|
64 | });
|
65 |
|
66 | return h(this.tag, {
|
67 | class: ['el-col', classList],
|
68 | style
|
69 | }, this.$slots.default);
|
70 | }
|
71 | };
|