使用element notification

resources/assets/js/components/AppDown.vue

@@ -15,6 +15,7 @@ import MarkdownPreview from "./MDEditor/components/preview";
 Vue.component('MarkdownPreview', MarkdownPreview)
 
 import axios from "axios";
+import { Notification } from 'element-ui';
 
 export default {
     name: 'AppDown',
@@ -50,54 +51,50 @@ export default {
                 let latestVersion = $A.leftDelete(data.tag_name.toLowerCase(), "v")
                 if (this.compareVersion(latestVersion, currentVersion) === 1) {
                     // 有新版本
-                    this.$Notice.close("app-down");
-                    this.$nextTick(() => {
-                        this.$Notice.info({
-                            name: "app-down",
-                            title: this.$L("更新提示"),
-                            duration: 0,
-                            onClose: () => {
-                                // 关闭提示后显示更新按钮
-                                this.repoStatus = 2;
-                            },
-                            render: h => {
-                                return h('span', [
-                                    h('span', [
-                                        h('span', this.$L('发现新版本') + ": "),
-                                        h('Tag', {
-                                            props: {
-                                                color: 'volcano'
-                                            }
-                                        }, data.tag_name)
-                                    ]),
-                                    h('MarkdownPreview', {
-                                        class: 'common-app-down-body',
-                                        props: {
-                                            initialValue: data.body
-                                        }
-                                    }),
-                                    h('div', {
-                                        class: 'common-app-down-link',
-                                        on: {
-                                            click: () => {
-                                                this.openExternal(data.html_url);
-                                            }
-                                        },
-                                    }, [
-                                        h('Icon', {
-                                            props: {
-                                                type: 'md-download'
-                                            },
-                                            style: {
-                                                marginRight: '5px'
-                                            }
-                                        }),
-                                        h('span', this.$L('立即升级'))
-                                    ]),
-                                ])
-                            }
-                        });
-                    })
+                    const h = this.$createElement;
+                    window.__appNotification && window.__appNotification.close();
+                    window.__appNotification = Notification({
+                        title: this.$L("更新提示"),
+                        duration: 0,
+                        position: "bottom-right",
+                        onClose: () => {
+                            this.repoStatus = 2;
+                        },
+                        message: h('span', [
+                            h('span', [
+                                h('span', this.$L('发现新版本') + ": "),
+                                h('Tag', {
+                                    props: {
+                                        color: 'volcano'
+                                    }
+                                }, data.tag_name)
+                            ]),
+                            h('MarkdownPreview', {
+                                class: 'common-app-down-body',
+                                props: {
+                                    initialValue: data.body
+                                }
+                            }),
+                            h('div', {
+                                class: 'common-app-down-link',
+                                on: {
+                                    click: () => {
+                                        this.openExternal(data.html_url);
+                                    }
+                                },
+                            }, [
+                                h('Icon', {
+                                    props: {
+                                        type: 'md-download'
+                                    },
+                                    style: {
+                                        marginRight: '5px'
+                                    }
+                                }),
+                                h('span', this.$L('立即升级'))
+                            ]),
+                        ])
+                    });
                 }
             },
             deep: true

resources/assets/sass/components/app-down.scss

@@ -25,7 +25,7 @@
 }
 
 .common-app-down-body {
-    max-height: 168px;
+    max-height: 175px;
     overflow: auto;
     margin: 18px 0;
     .markdown-preview {

resources/assets/sass/element.scss

@@ -6,12 +6,14 @@ $--dropdown-menuItem-hover-fill: #f4f5f7;
 $--dropdown-menuItem-hover-color: #606266;
 
 @import "~element-ui/packages/theme-chalk/src/common/transition";
+@import "~element-ui/packages/theme-chalk/src/icon";
 @import "~element-ui/packages/theme-chalk/src/avatar";
 @import "~element-ui/packages/theme-chalk/src/tooltip";
 @import "~element-ui/packages/theme-chalk/src/popover";
 @import "~element-ui/packages/theme-chalk/src/dropdown";
 @import "~element-ui/packages/theme-chalk/src/dropdown-menu";
 @import "~element-ui/packages/theme-chalk/src/dropdown-item";
+@import "~element-ui/packages/theme-chalk/src/notification";
 
 
 .el-dropdown-menu__item {