提交 a8c2a67a 编写于 作者: tony001's avatar tony001

update:更新

上级 131cf455
.app-standard-container{ .app-standard-container{
width: 100%; display: block;
height: 100%;
} }
\ No newline at end of file
...@@ -17,6 +17,14 @@ export class PanelContainerModel extends PanelDetailModel { ...@@ -17,6 +17,14 @@ export class PanelContainerModel extends PanelDetailModel {
*/ */
public details:string[] = []; public details:string[] = [];
/**
* 标题关闭模式
*
* @type {number}
* @memberof PanelContainerModel
*/
public titleBarCloseMode:number = 0;
/** /**
* Creates an instance of PanelContainerModel. * Creates an instance of PanelContainerModel.
* @param {*} [opts={}] * @param {*} [opts={}]
...@@ -25,6 +33,7 @@ export class PanelContainerModel extends PanelDetailModel { ...@@ -25,6 +33,7 @@ export class PanelContainerModel extends PanelDetailModel {
public constructor(opts: any = {}) { public constructor(opts: any = {}) {
super(opts); super(opts);
this.details = opts.details; this.details = opts.details;
this.titleBarCloseMode = opts.titleBarCloseMode;
} }
......
import { Util } from "@/utils";
/** /**
* 面板成员模型 * 面板成员模型
* *
...@@ -150,6 +152,30 @@ export class PanelDetailModel { ...@@ -150,6 +152,30 @@ export class PanelDetailModel {
*/ */
public flexGrow: number = 0; public flexGrow: number = 0;
/**
* flex布局参数
*
* @type {*}
* @memberof PanelDetailModel
*/
public flexParams: any = {};
/**
* 是否显示标题
*
* @type {boolean}
* @memberof PanelDetailModel
*/
public isShowCaption: boolean = false;
/**
* 界面样式表
*
* @type {string}
* @memberof PanelDetailModel
*/
public sysCss: string = ''
/** /**
* Creates an instance of PanelDetailModel. * Creates an instance of PanelDetailModel.
* PanelDetailModel 实例 * PanelDetailModel 实例
...@@ -176,6 +202,182 @@ export class PanelDetailModel { ...@@ -176,6 +202,182 @@ export class PanelDetailModel {
this.hAlignSelf = opts.hAlignSelf; this.hAlignSelf = opts.hAlignSelf;
this.vAlignSelf = opts.vAlignSelf; this.vAlignSelf = opts.vAlignSelf;
this.flexGrow = opts.flexGrow; this.flexGrow = opts.flexGrow;
this.flexParams = opts.flexParams;
this.isShowCaption = opts.isShowCaption;
this.sysCss = opts.sysCss;
}
/**
* 获取元素样式(元素,包含内容盒子 大小/边距/内容 的样式)
*
* @memberof PanelDetailModel
*/
public getElementStyle() {
const elementStyle = {};
Object.assign(elementStyle, this.getBoxSizeStyle());
Object.assign(elementStyle, this.getBoxSpacingStyle());
Object.assign(elementStyle, this.getBoxContentStyle());
return elementStyle;
}
/**
* 获取盒子间隔样式(元素)
*
* @memberof PanelDetailModel
*/
public getBoxSpacingStyle() {
const boxStyle = {};
// 上方间隔模式
if (this.spacingTop) {
Object.assign(boxStyle, Util.getItemSpacingStyle(this.spacingTop, 'top'));
}
// 下方间隔模式
if (this.spacingBottom) {
Object.assign(boxStyle, Util.getItemSpacingStyle(this.spacingBottom, 'bottom'));
}
// 左侧间隔模式
if (this.spacingLeft) {
Object.assign(boxStyle, Util.getItemSpacingStyle(this.spacingLeft, 'left'));
}
// 右侧间隔模式
if (this.spacingRight) {
Object.assign(boxStyle, Util.getItemSpacingStyle(this.spacingRight, 'right'));
}
return boxStyle;
}
/**
* 获取盒子大小样式(元素)
*
* @memberof PanelDetailModel
*/
public getBoxSizeStyle() {
const boxStyle = {};
if (this.widthMode || this.layoutWidth) {
Object.assign(boxStyle, Util.getBoxSize("WIDTH", this.widthMode, this.layoutWidth));
}
if (this.heightMode || this.layoutHeight) {
Object.assign(boxStyle, Util.getBoxSize("HEIGHT", this.heightMode, this.layoutHeight));
}
return boxStyle;
}
/**
* 获取盒子内容样式(元素,包含内容换行模式,内容水平对齐,内容垂直对齐)
*
* @memberof PanelDetailModel
*/
public getBoxContentStyle() {
const boxStyle = {};
return boxStyle;
}
/**
* 获取盒子边框样式(元素)
*
* @memberof PanelDetailModel
*/
public getBoxBorderStyle() {
const boxStyle = {};
return boxStyle;
}
/**
* 获取布局样式(布局,包含约束内容布局的样式,包含内容的对齐方式)
*
* @return {*}
* @memberof PanelDetailModel
*/
public getLayoutStyle() {
const layoutStyle = {};
Object.assign(layoutStyle, this.getBoxSelfAlignStyle());
Object.assign(layoutStyle, this.getBoxLayOutStyle());
return layoutStyle;
}
/**
* 获取自身对齐模式(布局)
*
* @memberof PanelDetailModel
*/
public getBoxSelfAlignStyle() {
const boxStyle = {};
// 自身对齐方式
if (this.vAlignSelf || this.hAlignSelf) {
Object.assign(boxStyle, { 'display': 'flex' });
// 自身垂直对齐模式
switch (this.vAlignSelf) {
case 'TOP':
Object.assign(boxStyle, { 'align-items': 'flex-start' });
break;
case 'MIDDLE':
Object.assign(boxStyle, { 'align-items': 'center' });
break;
case 'BOTTOM':
Object.assign(boxStyle, { 'align-items': 'flex-end' });
break;
default:
break;
}
// 自身水平对齐模式
switch (this.hAlignSelf) {
case 'LEFT':
Object.assign(boxStyle, { 'justify-content': 'flex-start' });
break;
case 'CENTER':
Object.assign(boxStyle, { 'justify-content': 'center' });
break;
case 'RIGHT':
Object.assign(boxStyle, { 'justify-content': 'flex-end' });
break;
case 'JUSTIFY':
Object.assign(boxStyle, { 'justify-content': 'space-between' });
break;
default:
break;
}
}
return boxStyle;
}
/**
* 获取盒子布局样式(布局)
*
* @memberof PanelDetailModel
*/
public getBoxLayOutStyle() {
const boxStyle = {};
// 识别FLEX
if (this.layout == 'FLEX') {
Object.assign(boxStyle, { 'display': 'flex', 'flex-grow': this.flexGrow ? this.flexGrow : 0 });
}
// 识别flex布局方向,横轴对齐,纵轴对齐
if (this.flexParams.align || this.flexParams.dir || this.flexParams.vAlign) {
Object.assign(boxStyle, { 'display': 'flex' });
if (this.flexParams.dir) {
Object.assign(boxStyle, { 'flex-direction': this.flexParams.dir });
}
if (this.flexParams.align) {
Object.assign(boxStyle, { 'justify-content': this.flexParams.align });
}
if (this.flexParams.vAlign) {
Object.assign(boxStyle, { 'align-items': this.flexParams.vAlign });
}
}
// 识别SIMPLEFLEX
if (this.layout == 'SIMPLEFLEX') {
if (this.flexGrow) {
Object.assign(boxStyle, { 'width': `${(100 / 12) * this.flexGrow}%`, 'height': '100%' });
} else {
// 简单FLEX布局自适应
Object.assign(boxStyle, { 'flex-grow': 1, 'min-width': `${(100 / 12)}%`, 'height': '100%' });
}
}
// 识别边缘布局
if (this.layout == 'BORDER') {
Object.assign(boxStyle, { 'display': 'flex' });
}
return boxStyle;
} }
} }
\ No newline at end of file
...@@ -472,9 +472,12 @@ export class Util { ...@@ -472,9 +472,12 @@ export class Util {
* @returns * @returns
*/ */
public static getBoxSize(mode: "WIDTH" | "HEIGHT", style: string, value: number) { public static getBoxSize(mode: "WIDTH" | "HEIGHT", style: string, value: number) {
if (!mode || !style) { if (!mode) {
return {}; return {};
} }
if(!style){
style = 'PX';
}
if (style === "FULL") { if (style === "FULL") {
return { [mode.toLowerCase()]: "100%" }; return { [mode.toLowerCase()]: "100%" };
} else { } else {
...@@ -488,4 +491,34 @@ export class Util { ...@@ -488,4 +491,34 @@ export class Util {
} }
} }
} }
/**
* 获取项间隔样式
*
* @param {string} spacingType
* @param {string} direction
* @return {*}
*/
public static getItemSpacingStyle(spacingType: string, direction: string) {
switch (spacingType) {
case 'OUTERNONE':
return { [`margin-${direction}`]: '0px' };
case 'OUTERSMALL':
return { [`margin-${direction}`]: '8px' };
case 'OUTERMEDIUM':
return { [`margin-${direction}`]: '16px' };
case 'OUTERLARGE':
return { [`margin-${direction}`]: '24px' };
case 'INNERNONE':
return { [`padding-${direction}`]: '0px' };
case 'INNERSMALL':
return { [`padding-${direction}`]: '8px' };
case 'INNERMEDIUM':
return { [`padding-${direction}`]: '16px' };
case 'INNERLARGE':
return { [`padding-${direction}`]: '24px' };
default:
return {};
}
}
} }
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册