update: 登录按钮更新

src/components/layout-element/login/app-login-button/app-login-button.less

-.app-user-button {
-    width: 100%;
+.app-login-button {
     .ivu-btn {
         width: 100%;
+        height: 100%;
     }
 }
\ No newline at end of file

src/components/layout-element/login/app-login-button/app-login-button.vue

 <template>
-    <div class="app-user-button">
-        <i-button @click="handleSubmit" :type="type">{{ caption }} </i-button>
+    <div :class="[model.sysCss, 'app-login-button']" :style="containerStyle">
+        <i-button @click="handleClick" :type="curStyle">
+            <span v-show="model.isShowCaption">{{ model.caption }}</span>
+        </i-button>
     </div>
 </template>
 
 <script lang="ts">
-import { Vue, Component, Watch, Prop, Model } from "vue-property-decorator";
+import { PanelButtonModel } from "@/model/panel-detail";
+import { Vue, Component, Prop } from "vue-property-decorator";
 
 @Component({})
-export default class AppUserId extends Vue {
-    @Prop() public predefinedType!: string;
+export default class AppLoginButton extends Vue {
+    /**
+     * 模型
+     *
+     * @type {PanelButtonModel}
+     * @memberof AppLoginButton
+     */
+    @Prop() public model!: PanelButtonModel;
 
-    @Prop() public type?: string;
+    /**
+     * 类型
+     *
+     * @type {string}
+     * @memberof AppLoginButton
+     */
+    @Prop() public defaultStyle?: string;
 
-    @Prop() public caption!: string;
+    /**
+     * 当前按钮类型
+     *
+     * @type {string}
+     * @memberof AppLoginButton
+     */
+    get curStyle(): string {
+        if (this.model.buttonStyle != "DEFAULT" && this.defaultStyle) {
+            return this.defaultStyle;
+        } else {
+            return this.model.buttonStyle.toLowerCase();
+        }
+    }
+
+    /**
+     * 按钮样式
+     *
+     * @type {string}
+     * @memberof AppLoginButton
+     */
+    public containerStyle: any = null;
+
+    /**
+     * 处理点击
+     *
+     * @type {string}
+     * @memberof AppLoginButton
+     */
+    public handleClick() {
+        switch (this.model.predefinedType) {
+            case "APP_LOGOUT":
+                this.logout();
+                break;
+            case "APP_REGISTER":
+                this.register();
+                break;
+            default:
+                this.$emit("itemClick", this.model.predefinedType);
+        }
+    }
+
+    public mounted() {
+        if (this.model) {
+            this.containerStyle = this.model.getElementStyle();
+        }
+    }
+
+    /**
+     * 登出
+     *
+     * @type {string}
+     * @memberof AppLoginButton
+     */
+    public logout() {
+        this.$http
+            .get("/v7/logout")
+            .then((response: any) => {
+                if (response && response.status === 200) {
+                    localStorage.removeItem("user");
+                    localStorage.removeItem("token");
+                    let leftTime = new Date();
+                    leftTime.setTime(leftTime.getSeconds() - 1);
+                    document.cookie = "ibzuaa-token=;expires=" + leftTime.toUTCString();
+                    this.$router.push({ name: "login" });
+                }
+            })
+            .catch((error: any) => {
+                console.error(error);
+            });
+    }
 
-    public handleSubmit() {
-        this.$emit('itemClick', this.predefinedType);
+    /**
+     * 注册
+     *
+     * @type {string}
+     * @memberof AppLoginButton
+     */
+    public register() {
+        // todo
     }
 }
 </script>
 
 <style lang="less">
-@import './app-login-button.less';
+@import "./app-login-button.less";
 </style>