app-button.vue

<template>
    <i-button class="app-button" :type="type" :size="size" :disabled="disabled" @click="handleClick">
        <i v-if="showIcon" :class="{[iconClass ? iconClass : '']: true, 'app-button__icon': true}"></i>
        <span v-if="showCaption" class="app-button__caption">
            {{caption}}
        </span>
    </i-button>
</template>

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

@Component({
})
export default class AppButton extends Vue {

    /**
     * 按钮类型
     * 
     * @type {string}
     * @memberof AppButton
     */
    @Prop({ default: 'default' }) public type!: "default" | "primary" | "dashed" | "text" | "info" | "success" | "warning" | "error";

    /**
     * 按钮大小
     * 
     * @type {string}
     * @memberof AppButton
     */
    @Prop({ default: 'default' }) public size!: 'large' | 'small' | 'default';

    /**
     * 按钮禁用
     * 
     * @type {boolean}
     * @memberof AppButton
     */
    @Prop({ default: false }) public disabled!: boolean;

    /**
     * 按钮图标
     * 
     * @type {string}
     * @memberof AppButton
     */
    @Prop() public iconClass?: string;

    /**
     * 按钮标题
     * 
     * @type {string}
     * @memberof AppButton
     */
    @Prop() public caption?: string;

    /**
     * 显示图标
     * 
     * @type {boolean}
     * @memberof AppButton
     */
    @Prop({ default: true }) public showIcon!: boolean;

    /**
     * 显示标题
     * 
     * @type {boolean}
     * @memberof AppButton
     */
    @Prop({ default: true }) public showCaption!: boolean;

    /**
     * 处理按钮点击
     * 
     * @prama
     * @memberof AppButton
     */
    public handleClick($event: MouseEvent) {
        this.$emit('click', $event);
    }
}
</script>

<style lang='scss'>
@import "./app-button.scss";
</style>