diff --git a/vue/src/assets/styles/element-ui.scss b/vue/src/assets/styles/element-ui.scss index 9a2aa25..fd17d7b 100644 --- a/vue/src/assets/styles/element-ui.scss +++ b/vue/src/assets/styles/element-ui.scss @@ -84,6 +84,20 @@ line-height: 12px; } + &__progress { + z-index: -1; + position: absolute; + height: 3px; + bottom: 0; + left: 10px; + right: 10px; + animation: el-message-progress linear; + background: currentColor; + opacity: .3; + transform-origin: 0 50%; + transform: scaleX(0); + } + .el-message__icon, .el-message__content { color: #fff !important; } @@ -222,6 +236,15 @@ } } +@keyframes el-message-progress { + 0% { + transform: scaleX(1) + } + 100% { + transform: scaleX(0) + } +} + diff --git a/vue/src/bizComponents/SearchForm/index.vue b/vue/src/bizComponents/SearchForm/index.vue index 9db4fe2..8b66a8e 100644 --- a/vue/src/bizComponents/SearchForm/index.vue +++ b/vue/src/bizComponents/SearchForm/index.vue @@ -15,7 +15,7 @@ data() { return { showCollapse: false, - collapse: false, + collapse: true, num: 0 } }, diff --git a/vue/src/components/Message/index.js b/vue/src/components/Message/index.js index e01e4b1..7605321 100644 --- a/vue/src/components/Message/index.js +++ b/vue/src/components/Message/index.js @@ -27,7 +27,7 @@ const Message = function (options) { if (originalMessage) { //旧实例的badge+1,并重新计时(如果有的话) originalMessage.badge++ - originalMessage.clearTimer() + originalMessage.clearTimer(true) originalMessage.startTimer() return originalMessage } diff --git a/vue/src/components/Message/main.vue b/vue/src/components/Message/main.vue index b006359..c56a20a 100644 --- a/vue/src/components/Message/main.vue +++ b/vue/src/components/Message/main.vue @@ -7,7 +7,6 @@ @mouseenter="clearTimer" @mouseleave="startTimer" > -
{{badge}}
@@ -15,6 +14,8 @@

+

{{badge}}
+
@@ -24,10 +25,14 @@ data() { return { visible: false, - badge: 1, + badge: 1,//标记值,大于1时显示 + progress: true,//是否显示进度条 + pause: false,//是否暂停关闭 message: '', duration: 3000, - type: '', + startAt: 0,//上一次开始关闭计时的时间 + remainTime: 0,//还剩多少毫秒关闭 + type: '',//默认值改为js控制 iconClass: '', customClass: '', onClose: null, @@ -58,13 +63,16 @@ return { 'top': `${this.verticalOffset}px` } + }, + progressStyle() { + if (!this.progress || this.closed) return 'transform: scaleX(0)' + if (this.pause) return `transform: scaleX(${this.remainTime / this.duration});animation-play-state:paused` + return `animation-duration: ${this.duration}ms;animation-play-state:running` } }, watch: { closed(newVal) { - if (newVal) { - this.visible = false - } + if (newVal) this.visible = false } }, methods: { @@ -76,14 +84,19 @@ this.closed = true typeof this.onClose === 'function' && this.onClose(this) }, - clearTimer() { + clearTimer(reset) { + this.pause = true + this.remainTime = reset === true ? this.duration : this.remainTime - (Date.now() - this.startAt) clearTimeout(this.timer) }, startTimer() { - if (this.duration > 0) { + if (this.duration > 0 && !this.closed) { + this.pause = false + this.startAt = Date.now() + if (this.remainTime === 0) this.remainTime = this.duration this.timer = setTimeout(() => { !this.closed && this.close() - }, this.duration) + }, this.remainTime) } } }, diff --git a/vue/src/config/request.js b/vue/src/config/request.js index 78025bd..69700f4 100644 --- a/vue/src/config/request.js +++ b/vue/src/config/request.js @@ -1,6 +1,7 @@ import axios from 'axios' import {apiPrefix} from '@/config' -import {Message, MessageBox, Notification} from 'element-ui' +import {MessageBox, Notification} from 'element-ui' +import Message from '@/components/Message' import store from '@/store' const service = axios.create({