diff --git a/src/notify/index.js b/src/notify/index.js index 71f296e..424dbf9 100644 --- a/src/notify/index.js +++ b/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.timer = setTimeout(() => { - this.close() - }, 3000) + this.#up = this.parentNode + + if (this.opt.duration > 0) { + this.timer = setTimeout(() => { + this.close() + }, 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)