提交 e5c979ce 编写于 作者: Shine-zwj's avatar Shine-zwj

update:更新

上级 6679461e
<template>
<i-button
:class="className"
:class="curClassName"
:style="curStyle"
:type="buttonType"
:disabled="disabled"
:title="tooltip"
......@@ -45,67 +46,91 @@ export default class AppPresetButton extends Vue {
@Prop() public caption?: string;
/**
* 显示标题
* 加载状态
*
* @memberof AppPresetButton
*/
@Prop({ default: true }) public showCaption!: boolean;
@Prop({ default: false }) public loading?: boolean;
/**
* 禁用状态
* 布局模型详情
*
* @type {*}
* @memberof AppPresetButton
*/
@Prop({ default: false }) public disabled?: boolean;
@Prop() public layoutModelDetails: any;
/**
* 加载状态
*
* @memberof AppPresetButton
*/
@Prop({ default: false }) public loading?: boolean;
/**
* 传入数据
* 显示标题
*
* @memberof AppPresetButton
*/
@Prop() public data: any;
get showCaption() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.showCaption;
}
/**
* 图标
* 类名
*
* @memberof AppPresetButton
*/
@Prop() public cssClass?: string;
get curClassName(){
const layoutModel = this.layoutModelDetails[this.name];
return `app-preset-button ${this.name} ${layoutModel.sysCss}`;
}
/**
* 图片路径
*
* @memberof AppPresetButton
*/
@Prop() public imagePath?: string;
get imagePath() {
const layoutModel = this.layoutModelDetails[this.name];
let imagePath = '';
if (layoutModel.sysImage) {
imagePath = layoutModel.sysImage.imagePath;
} else if (layoutModel.uiAction) {
imagePath = layoutModel.uiAction.imagePath;
}
return imagePath;
}
/**
* 按钮绘制模式
* 图标
*
* @memberof AppPresetButton
*/
@Prop({ default: 'BUTTON' }) public renderMode!: 'BUTTON' | 'LINK';
get cssClass() {
const layoutModel = this.layoutModelDetails[this.name];
let cssClass = '';
if (layoutModel.sysImage) {
cssClass = layoutModel.sysImage.iconcls;
} else if (layoutModel.uiAction) {
cssClass = layoutModel.uiAction.iconcls;
}
return cssClass;
}
/**
* 按钮样式
*
* 当前容器样式
*
* @memberof AppPresetButton
*/
@Prop({ default: 'DEFAULT' }) public buttonStyle!: 'DEFAULT' | 'INVERSE' | 'PRIMARY' | 'INFO' | 'SUCCESS' | 'WARNING' | 'DANGER' | 'STYLE2' | 'STYLE3' | 'STYLE4';
get curStyle(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.getElementStyle();
}
/**
* 按钮图标方向
*
* 禁用
*
* @memberof AppPresetButton
*/
@Prop({ default: 'LEFT' }) public iconAlign!: 'LEFT' | 'TOP' | 'RIGHT' | 'BOTTOM';
get disabled(){
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.disabled;
}
/**
* 按钮类型
......@@ -113,42 +138,45 @@ export default class AppPresetButton extends Vue {
* @memberof AppPresetButton
*/
get buttonType() {
if (Object.is(this.renderMode, 'LINK')) {
const layoutModel = this.layoutModelDetails[this.name];
if (Object.is(layoutModel.renderMode, 'LINK')) {
return 'text';
} else {
if (
Object.is(this.buttonStyle, 'DEFAULT') ||
Object.is(this.buttonStyle, 'STYLE2') ||
Object.is(this.buttonStyle, 'STYLE3') ||
Object.is(this.buttonStyle, 'STYLE4')
Object.is(layoutModel.buttonStyle, 'DEFAULT') ||
Object.is(layoutModel.buttonStyle, 'STYLE2') ||
Object.is(layoutModel.buttonStyle, 'STYLE3') ||
Object.is(layoutModel.buttonStyle, 'STYLE4')
) {
return 'default';
} else if (Object.is(this.buttonStyle, 'DANGER')) {
} else if (Object.is(layoutModel.buttonStyle, 'DANGER')) {
return 'error';
} else if (Object.is(this.buttonStyle, 'INVERSE')) {
} else if (Object.is(layoutModel.buttonStyle, 'INVERSE')) {
return 'primary';
} else {
return this.buttonStyle.toLowerCase();
return layoutModel.buttonStyle.toLowerCase();
}
}
}
/**
* 按钮幽灵属性,使按钮背景透明
* 图标方向
*
* @memberof AppPresetButton
*/
get buttonGhost() {
return Object.is(this.buttonStyle, 'INVERSE');
get iconAlign() {
const layoutModel = this.layoutModelDetails[this.name];
return layoutModel.iconAlign || 'LEFT';
}
/**
* 类名
* 按钮幽灵属性,使按钮背景透明
*
* @memberof AppPresetButton
*/
get className(): string {
return `app-preset-button ${this.name}`;
get buttonGhost() {
const layoutModel = this.layoutModelDetails[this.name];
return Object.is(layoutModel.buttonStyle, 'INVERSE');
}
/**
......
......@@ -11,9 +11,12 @@ export class PanelButtonModel extends PanelDetailModel {
constructor(opts: any = {}) {
super(opts);
this.uiaction = opts.uiaction;
this.uiAction = opts.uiAction;
this.buttonStyle = opts.buttonStyle;
this.renderMode = opts.renderMode;
this.iconAlign = opts.iconAlign || 'LEFT';
this.showCaption = opts.showCaption ? true : false;
this.disabled = opts.disabled ? true : false;
}
/**
......@@ -22,8 +25,31 @@ export class PanelButtonModel extends PanelDetailModel {
* @type {*}
* @memberof PanelButtonModel
*/
public uiaction:any;
public uiAction:any;
/**
* 图标方向
*
* @type {('LEFT' | 'TOP' | 'RIGHT' | 'BOTTOM')}
* @memberof PanelButtonModel
*/
public iconAlign: 'LEFT' | 'TOP' | 'RIGHT' | 'BOTTOM';
/**
* 是否禁用
*
* @type {boolean}
* @memberof PanelButtonModel
*/
public disabled: boolean = false;
/**
* 显示标题
*
* @type {boolean}
* @memberof PanelButtonModel
*/
public showCaption: boolean = true;
/**
* @description 按钮类型
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册