app-preset-button.vue

<template>
    <div :class="curClassName" :style="curStyle">
        <i-button :type="buttonType" :disabled="disabled" :title="curTooltip" :loading="loading" :ghost="buttonGhost"
            @click="handleClick">
            <div :class="['button-content', iconAlign.toLowerCase()]">
                <span v-if="cssClass || imagePath" class="icon">
                    <i v-if="cssClass" :class="cssClass" />
                    <img v-else :src="imagePath" />
                </span>
                <span v-if="showCaption" class="caption">{{ curCaption }}</span>
            </div>
        </i-button>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component({})
export default class AppPresetButton extends Vue {
    /**
     * 按钮name
     *
     * @type {any}
     * @memberof AppPresetButton
     */
    @Prop() public name!: string;

    /**
     * 加载状态
     *
     * @memberof AppPresetButton
     */
    @Prop({ default: false }) public loading?: boolean;

    /**
     * 布局模型详情
     *
     * @type {*}
     * @memberof AppPresetButton
     */
    @Prop() public layoutModelDetails: any;

    /**
     * 下标
     *
     * @type {number}
     * @memberof AppPresetButton
     */
    @Prop() public index?: number;

    /**
     * 项名称
     *
     * @type {*}
     * @memberof AppPresetButton
     */
    get itemName() {
        return (this.index || this.index === 0) ? `${this.name}_${this.index}` : this.name;
    }

    /**
     * 显示标题
     *
     * @memberof AppPresetButton
     */
    get showCaption() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return layoutModel.isShowCaption;
        }
    }

    /**
     * 标题
     *
     * @memberof AppLoginButton
     */
    get curCaption() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return layoutModel.caption;
        }
    }

    /**
     * 提示信息
     *
     * @memberof AppLoginButton
     */
    get curTooltip() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return layoutModel.tooltip;
        }
    }

    /**
     * 类名
     *
     * @memberof AppPresetButton
     */
    get curClassName() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return `app-preset-button ${this.itemName} ${layoutModel.sysCss}`;
        }
    }

    /**
     * 图片路径
     *
     * @memberof AppPresetButton
     */
    get imagePath() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            let imagePath = '';
            if (layoutModel.sysImage) {
                imagePath = layoutModel.sysImage.imagePath;
            } else if (layoutModel.uiAction) {
                imagePath = layoutModel.uiAction.imagePath;
            }
            return imagePath;
        }
    }

    /**
     * 图标
     *
     * @memberof AppPresetButton
     */
    get cssClass() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            let cssClass = '';
            if (layoutModel.sysImage) {
                cssClass = layoutModel.sysImage.iconcls;
            } else if (layoutModel.uiAction) {
                cssClass = layoutModel.uiAction.iconcls;
            }
            return cssClass;
        }
    }

    /**
     * 当前容器样式
     * 
     * @memberof AppPresetButton
     */
    get curStyle() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return layoutModel.getElementStyle();
        }
    }

    /**
     * 禁用
     * 
     * @memberof AppPresetButton
     */
    get disabled() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return layoutModel.disabled;
        }
    }

    /**
     * 按钮类型
     *
     * @memberof AppPresetButton
     */
    get buttonType() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            if (Object.is(layoutModel.renderMode, 'LINK')) {
                return 'text';
            } else {
                if (
                    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(layoutModel.buttonStyle, 'DANGER')) {
                    return 'error';
                } else if (Object.is(layoutModel.buttonStyle, 'INVERSE')) {
                    return 'primary';
                } else {
                    return layoutModel.buttonStyle.toLowerCase();
                }
            }
        }
    }

    /**
     * 图标方向
     *
     * @memberof AppPresetButton
     */
    get iconAlign() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if(layoutModel){
            return layoutModel.iconAlign || 'LEFT';
        }else{
            return 'LEFT';
        }
    }

    /**
     * 按钮幽灵属性，使按钮背景透明
     *
     * @memberof AppPresetButton
     */
    get buttonGhost() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if(layoutModel){
            return Object.is(layoutModel.buttonStyle, 'INVERSE');
        }
    }

    /**
     * 点击按钮
     *
     * @param {*} event
     * @memberof AppPresetButton
     */
    public handleClick(event: any) {
        this.$emit('itemClick', this.name);
    }
}
</script>
<style lang='less'>
@import './app-preset-button.less';
</style>