app-preset-button.vue

<template>
    <i-button 
        :class="curClassName"
        :style="curStyle"
        :type="buttonType"
        :disabled="disabled"
        :title="tooltip"
        :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">{{ caption }}</span>
        </div>
    </i-button>
</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() public tooltip?: string;

    /**
     * 标题
     *
     * @memberof AppPresetButton
     */
    @Prop() public caption?: string;

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

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

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

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

    /**
     * 图片路径
     *
     * @memberof AppPresetButton
     */
    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
     */
    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
     */
    get curStyle(){
        const layoutModel = this.layoutModelDetails[this.name];
        return layoutModel.getElementStyle();
    }

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

    /**
     * 按钮类型
     *
     * @memberof AppPresetButton
     */
    get buttonType() {
        const layoutModel = this.layoutModelDetails[this.name];
        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.name];
        return layoutModel.iconAlign || 'LEFT';
    }

    /**
     * 按钮幽灵属性，使按钮背景透明
     *
     * @memberof AppPresetButton
     */
    get buttonGhost() {
        const layoutModel = this.layoutModelDetails[this.name];
        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>