SearchForm默认折叠

el-message加入关闭进度条，鼠标移入移出时不再重新计时

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)
+    }
+}
+
 
 
 

vue/src/bizComponents/SearchForm/index.vue

@@ -15,7 +15,7 @@
         data() {
             return {
                 showCollapse: false,
-                collapse: false,
+                collapse: true,
                 num: 0
             }
         },

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
     }

vue/src/components/Message/main.vue

@@ -7,7 +7,6 @@
              @mouseenter="clearTimer"
              @mouseleave="startTimer"
         >
-            <div v-if="badge>1" :key="badge" class="el-message__badge">{{badge}}</div>
             <i v-if="iconClass" :class="iconClass"/>
             <i v-else :class="typeClass"/>
             <slot>
@@ -15,6 +14,8 @@
                 <p v-else v-html="message" class="el-message__content"/>
             </slot>
             <i v-if="showClose" class="el-message__closeBtn el-icon-close" @click="close"/>
+            <div v-if="badge>1" :key="'badge'+badge" class="el-message__badge">{{badge}}</div>
+            <div v-if="progress&&!closed" :key="'progress'+badge" class="el-message__progress" :style="progressStyle"/>
         </div>
     </transition>
 </template>
@@ -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)
                 }
             }
         },

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