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({