update：更新

src/app-register.ts

@@ -135,6 +135,7 @@ import AppIndexNavTabs from './components/layout-element/index/app-index-nav-tab
 import AppIndexOrgSelect from './components/layout-element/index/app-index-org-select/app-index-org-select.vue';
 import AppIndexUserInfo from './components/layout-element/index/app-index-user-info/app-index-user-info.vue';
 import AppCtrlPos from './components/layout-element/control/app-ctrl-pos/app-ctrl-pos.vue';
+import AppPresetButton from './components/layout-element/interactive/app-preset-button/app-preset-button.vue';
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
 // 全局挂载实体权限服务注册中心
@@ -284,5 +285,6 @@ export const AppComponents = {
         v.component('app-index-org-select', AppIndexOrgSelect);
         v.component('app-index-user-info', AppIndexUserInfo);
         v.component('app-ctrl-pos', AppCtrlPos);
+        v.component('app-preset-button',AppPresetButton);
     },
 };
\ No newline at end of file

src/components/layout-element/interactive/app-preset-button/app-preset-button.less

+.app-preset-button.ivu-button {
+    font-size: 12px;
+
+    >span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .button-content {
+        display: flex;
+
+        &.left {
+            justify-content: flex-start;
+            align-items: center;
+
+            .icon+.caption {
+                padding-left: 6px;
+            }
+        }
+
+        &.right {
+            flex-direction: row-reverse;
+            justify-content: flex-start;
+            align-items: center;
+
+            .icon+.caption {
+                padding-right: 6px;
+            }
+        }
+
+        &.top {
+            flex-direction: column;
+            justify-content: flex-start;
+        }
+
+        &.bottom {
+            flex-direction: column-reverse;
+            justify-content: flex-start;
+        }
+    }
+}
+
+//  加载效果
+.app-preset-button.ivu-btn-loading {
+    display: flex;
+    line-height: 2;
+
+    .ivu-icon-ios-loading {
+        line-height: 2;
+    }
+}
\ No newline at end of file

src/components/layout-element/interactive/app-preset-button/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>
\ No newline at end of file