优化通知组件

src/notify/index.js

@@ -12,7 +12,13 @@ const ANIMATION = [
   { transform: 'translateX(0)', opacity: 1 }
 ]
 
-const DEFAULT_OPT = { icon: '', image: '', body: '', progress: 0 }
+const DEFAULT_OPT = {
+  icon: '',
+  image: '',
+  body: '',
+  progress: 0,
+  duration: 4500
+}
 
 let notifyIns = null
 
@@ -38,12 +44,21 @@ class NotifyGroup extends Component {
       }
     `
   ]
+
+  mounted() {
+    this.$on('removed', ev => {
+      if (this.children.length < 1) {
+        notifyIns = null
+        this.remove()
+      }
+    })
+  }
 }
 
 class Notify extends Component {
   static props = {
     title: '',
-    opt: { icon: '', image: '', body: '', progress: 0 }
+    opt: { ...DEFAULT_OPT }
   }
 
   static styles = [
@@ -128,10 +143,13 @@ class Notify extends Component {
     `
   ]
 
+  #up = null
+
   close() {
     clearTimeout(this.timer)
     this.$refs.box.$animate(true).then(_ => {
       this.remove()
+      this.#up.$emit('removed')
     })
   }
 
@@ -143,14 +161,19 @@ class Notify extends Component {
       n = 100
     }
     this.opt.progress = n
+    this.$requestUpdate()
   }
 
   mounted() {
     this.$refs.box.$animate()
 
+    this.#up = this.parentNode
+
+    if (this.opt.duration > 0) {
       this.timer = setTimeout(() => {
         this.close()
-    }, 3000)
+      }, this.opt.duration)
+    }
   }
 
   render() {
@@ -190,7 +213,7 @@ Notify.reg('notify')
 
 export default function notify(
   title = '通知',
-  { icon, body, image, progress }
+  { icon, body, image, progress, duration }
 ) {
   //
   let container = notifyIns || document.createElement('wc-notify-group')
@@ -198,7 +221,7 @@ export default function notify(
 
   elem.title = title
 
-  elem.opt = merge({ icon, body, image, progress })
+  elem.opt = merge({ icon, body, image, progress, duration })
 
   container.append(elem)