38 lines
1.7 KiB
Vue
38 lines
1.7 KiB
Vue
<template>
|
|
<div class="aa-notification-wrap">
|
|
<div v-for="m in list" :key="m.id" class="aa-notification" :class="'is-' + m.type">
|
|
<span class="aa-notification-icon">{{ icon(m.type) }}</span>
|
|
<div class="aa-notification-body">
|
|
<div class="aa-notification-title">{{ m.title }}</div>
|
|
<div class="aa-notification-desc" v-if="m.desc">{{ m.desc }}</div>
|
|
</div>
|
|
<span class="aa-notification-close" @click="close(m.id)">✕</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'AaNotificationPro',
|
|
props: { duration: { type: Number, default: 4500 } },
|
|
data: function () { return { list: [], _id: 0 }; },
|
|
methods: {
|
|
icon: function (t) { return ({ success: '✓', error: '✕', warning: '!', info: 'i' })[t] || 'i'; },
|
|
open: function (opts) {
|
|
var id = ++this._id;
|
|
this.list.push({ id: id, type: opts.type || 'info', title: opts.title, desc: opts.desc });
|
|
var d = opts.duration == null ? this.duration : opts.duration;
|
|
if (d > 0) { var self = this; setTimeout(function () { self.close(id); }, d); }
|
|
return id;
|
|
},
|
|
close: function (id) { this.list = this.list.filter(function (m) { return m.id !== id; }); },
|
|
success: function (t, d, dur) { return this.open({ type: 'success', title: t, desc: d, duration: dur }); },
|
|
error: function (t, d, dur) { return this.open({ type: 'error', title: t, desc: d, duration: dur }); },
|
|
warning: function (t, d, dur) { return this.open({ type: 'warning', title: t, desc: d, duration: dur }); },
|
|
info: function (t, d, dur) { return this.open({ type: 'info', title: t, desc: d, duration: dur }); }
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style src="./NotificationPro.css"></style>
|