36 lines
1.5 KiB
Plaintext
36 lines
1.5 KiB
Plaintext
<template>
|
|
<div class="aa-message-wrap">
|
|
<div v-for="m in list" :key="m.id" class="aa-message" :class="'is-' + m.type">
|
|
<span class="aa-message-icon">{{ icon(m.type) }}</span>
|
|
<span class="aa-message-content">{{ m.content }}</span>
|
|
<span v-if="m.closable !== false" class="aa-message-close" @click="close(m.id)">✕</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
const props = defineProps({ duration: { type: Number, default: 3000 } });
|
|
const list = ref([]);
|
|
let _id = 0;
|
|
|
|
function icon(t) { return ({ success: '✓', error: '✕', warning: '!', info: 'i', loading: '…' })[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', content: opts.content, closable: opts.closable });
|
|
const d = opts.duration == null ? props.duration : opts.duration;
|
|
if (d > 0) setTimeout(() => close(id), d);
|
|
return id;
|
|
}
|
|
function success(c, d) { return open({ type: 'success', content: c, duration: d }); }
|
|
function error(c, d) { return open({ type: 'error', content: c, duration: d }); }
|
|
function warning(c, d) { return open({ type: 'warning', content: c, duration: d }); }
|
|
function info(c, d) { return open({ type: 'info', content: c, duration: d }); }
|
|
function loading(c, d) { return open({ type: 'loading', content: c, duration: d }); }
|
|
|
|
defineExpose({ open, close, success, error, warning, info, loading });
|
|
</script>
|
|
|
|
<style src="./MessagePro.css"></style>
|