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
import { computed, defineComponent, PropType } from 'vue';
import {
IPSFlexLayoutPos,
IPSGridLayoutPos,
IPSLayoutPos,
} from '@ibiz-template/model';
import { useNamespace } from '@ibiz-template/vue-util';
import { ILayoutController } from '@ibiz-template/controller';
export const AppCol = defineComponent({
name: 'AppCol',
props: {
layoutPos: Object as PropType<IPSLayoutPos>,
controller: {
type: Object as PropType<ILayoutController>,
required: true,
},
},
setup(props) {
const ns = useNamespace('col');
// 计算栅格布局的属性
const gridAttrs = computed(() => {
const gridLayoutPos = props.layoutPos as IPSGridLayoutPos;
// FLEX布局时不计算
if (gridLayoutPos.layout === 'FLEX') {
return {};
}
// 计算倍率，12列栅格为2
const {
colXS,
colXSOffset,
colSM,
colSMOffset,
colMD,
colMDOffset,
colLG,
colLGOffset,
} = gridLayoutPos;
const multiplier = gridLayoutPos.layout === 'TABLE_24COL' ? 1 : 2;
return {
md: { span: colXS * multiplier, offset: colXSOffset * multiplier },
lg: { span: colSM * multiplier, offset: colSMOffset * multiplier },
xl: { span: colMD * multiplier, offset: colMDOffset * multiplier },
xxl: { span: colLG * multiplier, offset: colLGOffset * multiplier },
};
});
const cssVars = computed(() => {
const styles = {
width: props.controller.width,
height: props.controller.height,
};
Object.assign(styles, props.controller.extraStyle);
return styles;
});
return { ns, gridAttrs, cssVars };
},
render(h) {
if (this.controller.visible === false) {
return null;
}
if (this.layoutPos?.layout === 'FLEX') {
return (
<div
class={[this.ns.b(), this.ns.m('flex'), this.controller.extraClass]}
style={{
flexGrow: (this.layoutPos as IPSFlexLayoutPos).grow,
flexShrink: (this.layoutPos as IPSFlexLayoutPos).shrink,
flexBasis: (this.layoutPos as IPSFlexLayoutPos).basis,
...this.cssVars,
}}
>
{this.$slots.default}
</div>
);
}
return h(
'i-col',
{
class: [this.ns.b(), this.ns.m('grid'), this.controller.extraClass],
props: this.gridAttrs,
style: this.cssVars,
},
this.$slots.default,
);
},
});