1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
| <template>
| <div :class="classes" :style="styles">
| <slot></slot>
| </div>
| </template>
| <script>
| import { findComponentUpward } from '../../utils/assist';
| const prefixCls = 'ivu-col';
|
| function parseFlex(flex) {
| if (typeof flex === 'number') {
| return `${flex} ${flex} auto`;
| }
|
| if (/^\d+(\.\d+)?(px|em|rem|%)$/.test(flex)) {
| return `0 0 ${flex}`;
| }
|
| return flex;
| }
|
| export default {
| name: 'iCol',
| 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],
| xl: [Number, Object],
| xxl: [Number, Object],
| // 4.5.0
| flex: {
| type: [Number, String],
| default: ''
| }
| },
| 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', 'xl', 'xxl'].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'
| };
| }
|
| // 4.5.0
| if (this.flex) {
| style.flex = parseFlex(this.flex);
| }
|
| return style;
| }
| },
| methods: {
| updateGutter () {
| const Row = findComponentUpward(this, 'Row');
| if (Row) {
| Row.updateGutter(Row.gutter);
| }
| }
| },
| mounted () {
| this.updateGutter();
| },
| beforeDestroy () {
| this.updateGutter();
| }
| };
| </script>
|
|
