Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
<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 setup>
|
||||
import { ref } from 'vue';
|
||||
const props = defineProps({ duration: { type: Number, default: 4500 } });
|
||||
const list = ref([]);
|
||||
let _id = 0;
|
||||
|
||||
function icon(t) { return ({ success: '✓', error: '✕', warning: '!', info: 'i' })[t] || 'i'; }
|
||||
function close(id) { list.value = list.value.filter(m => m.id !== id); }
|
||||
function open(opts) {
|
||||
const id = ++_id;
|
||||
list.value.push({ id, type: opts.type || 'info', title: opts.title, desc: opts.desc });
|
||||
const d = opts.duration == null ? props.duration : opts.duration;
|
||||
if (d > 0) setTimeout(() => close(id), d);
|
||||
return id;
|
||||
}
|
||||
function success(t, d, dur) { return open({ type: 'success', title: t, desc: d, duration: dur }); }
|
||||
function error(t, d, dur) { return open({ type: 'error', title: t, desc: d, duration: dur }); }
|
||||
function warning(t, d, dur) { return open({ type: 'warning', title: t, desc: d, duration: dur }); }
|
||||
function info(t, d, dur) { return open({ type: 'info', title: t, desc: d, duration: dur }); }
|
||||
|
||||
defineExpose({ open, close, success, error, warning, info });
|
||||
</script>
|
||||
|
||||
<style src="./NotificationPro.css"></style>
|
||||
Reference in New Issue
Block a user