面板按钮

src/app-register.ts

@@ -87,6 +87,8 @@ import ActionTimeline from './components/action-timeline/action-timeline.vue'
 import CronEditor from './components/cron-editor/cron-editor.vue'
 import AppMessagePopover from './components/app-message-popover/app-message-popover.vue'
 import AppPanelItem from './components/app-panel-item/app-panel-item.vue'
+import AppPanelButton from './components/app-panel-button/app-panel-button.vue'
+
 
 // 全局挂载UI实体服务注册中心
 window['uiServiceRegister'] = uiServiceRegister;
@@ -112,6 +114,7 @@ export const AppComponents = {
         v.prototype.$verify = Verify;
         v.prototype.$viewTool = ViewTool;
         v.prototype.$uiActionTool = UIActionTool;
+        v.component('app-panel-button',AppPanelButton);
         v.component('app-panel-item',AppPanelItem);
         v.component('app-full-scren',AppFullScren);
         v.component('app-lock-scren',AppLockScren);

src/components/app-panel-button/app-panel-button.vue

+<template>
+    <div>
+        <Button type="primary" long @click="onClick">
+            <i v-if="icon" :class="icon"></i>
+            <span v-if="showCaption">{{caption ? caption : ''}}</span>
+        </Button>
+    </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Watch } from "vue-property-decorator";
+
+@Component({})
+export default class AppPanelButton extends Vue {
+
+    /**
+     * 图标
+     *  
+     * @type {string}
+     * @memberof AppPanelButton
+     */
+    @Prop() public icon?: string;
+
+    /**
+     * 标题
+     *  
+     * @type {string}
+     * @memberof AppPanelButton
+     */
+    @Prop() public caption?: string;
+
+    /**
+     * 显示标题
+     *  
+     * @type {boolean}
+     * @memberof AppPanelButton
+     */
+    @Prop() public showCaption!: boolean;
+
+    /**
+     * 点击按钮
+     *
+     * @param {*} $event
+     * @memberof AppPanelButton
+     */
+    public onClick($event: any){
+        this.$emit('onClick',$event);
+    }
+
+}
+</script>
+<style lang='less'>
+
+</style>
\ No newline at end of file

src/components/app-panel-item/app-panel-item.vue

 <template>
     <div :class="classes">
-        <div v-if="Object.is(this.labelPos,'NONE') || !this.labelPos" class="editor">
+        <div v-if="Object.is(labelPos,'NONE') || !labelPos" class="editor">
             <div :class="valueCheck == true ?'':'editorStyle'">
               <slot ></slot>
             </div>
         </div>
-        <div v-if="!Object.is(this.labelPos,'NONE')" class="app-panel-item-label">
+        <div v-if="!Object.is(labelPos,'NONE')" class="app-panel-item-label">
             <span v-if="required" style="color:red;">* </span>
-            {{this.isEmptyCaption ? '' : this.caption}}
+            {{isEmptyCaption ? '' : caption}}
         </div>
-        <div v-if="Object.is(this.labelPos,'BOTTOM') || Object.is(this.labelPos,'TOP') || Object.is(this.labelPos,'LEFT') || Object.is(this.labelPos,'RIGHT')" class="editor">
+        <div v-if="Object.is(labelPos,'BOTTOM') || Object.is(labelPos,'TOP') || Object.is(labelPos,'LEFT') || Object.is(labelPos,'RIGHT')" class="editor">
           <div :class="valueCheck == true ?'':'editorStyle'">
             <slot ></slot>
           </div>