app-preset-button.vue

<template>
    <i-button 
        :class="className"
        :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: true }) public showCaption!: boolean;

    /**
     * 禁用状态
     *
     * @memberof AppPresetButton
     */
    @Prop({ default: false }) public disabled?: boolean;

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

    /**
     * 传入数据
     *
     * @memberof AppPresetButton
     */
    @Prop() public data: any;

    /**
     * 图标
     *
     * @memberof AppPresetButton
     */
    @Prop() public cssClass?: string;

    /**
     * 图片路径
     *
     * @memberof AppPresetButton
     */
    @Prop() public imagePath?: string;

    /**
     * 按钮绘制模式
     *
     * @memberof AppPresetButton
     */
    @Prop({ default: 'BUTTON' }) public renderMode!: 'BUTTON' | 'LINK';

    /**
     * 按钮样式
     *
     * @memberof AppPresetButton
     */
    @Prop({ default: 'DEFAULT' }) public buttonStyle!: 'DEFAULT' | 'INVERSE' | 'PRIMARY' | 'INFO' | 'SUCCESS' | 'WARNING' | 'DANGER' | 'STYLE2' | 'STYLE3' | 'STYLE4';

    /**
     * 按钮图标方向
     *
     * @memberof AppPresetButton
     */
    @Prop({ default: 'LEFT' }) public iconAlign!: 'LEFT' | 'TOP' | 'RIGHT' | 'BOTTOM';

    /**
     * 按钮类型
     *
     * @memberof AppPresetButton
     */
    get buttonType() {
        if (Object.is(this.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')
            ) {
                return 'default';
            } else if (Object.is(this.buttonStyle, 'DANGER')) {
                return 'error';
            } else if (Object.is(this.buttonStyle, 'INVERSE')) {
                return 'primary';
            } else {
                return this.buttonStyle.toLowerCase();
            }
        }
    }

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

    /**
     * 类名
     *
     * @memberof AppPresetButton
     */
    get className(): string {
        return `app-preset-button ${this.name}`;
    }

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