From a150bafc12e38e5d0bc9063ec88310a68be842e2 Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Sun, 17 May 2020 12:15:39 +0800
Subject: [PATCH] =?UTF-8?q?SearchForm=E9=BB=98=E8=AE=A4=E6=8A=98=E5=8F=A0?=
=?UTF-8?q?=20el-message=E5=8A=A0=E5=85=A5=E5=85=B3=E9=97=AD=E8=BF=9B?=
=?UTF-8?q?=E5=BA=A6=E6=9D=A1=EF=BC=8C=E9=BC=A0=E6=A0=87=E7=A7=BB=E5=85=A5?=
=?UTF-8?q?=E7=A7=BB=E5=87=BA=E6=97=B6=E4=B8=8D=E5=86=8D=E9=87=8D=E6=96=B0?=
=?UTF-8?q?=E8=AE=A1=E6=97=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
vue/src/assets/styles/element-ui.scss | 23 ++++++++++++++++
vue/src/bizComponents/SearchForm/index.vue | 2 +-
vue/src/components/Message/index.js | 2 +-
vue/src/components/Message/main.vue | 31 +++++++++++++++-------
vue/src/config/request.js | 3 ++-
5 files changed, 49 insertions(+), 12 deletions(-)
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({