npm install vue-simple-message
in .js
/.ts
file:
import SimpleMessage from 'vue-simple-message';
// ...
app.use(SimpleMessage)
// ...
in .vue
file:
<template>
<simple-message v-model:list="list"></simple-message>
</template>
<script setup>
import { ref } from 'vue';
const list = ref([]);
</script>
or
<template>
<simple-message :list="list" @close="onClose"></simple-message>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { NotificationItem } from 'vue-simple-message';
const list = ref<NotificationItem[]>([]);
function onClose(id: string) {
// ...
}
</script>
type NotificationType = 'info' | 'warn' | 'error' | 'debug';
interface NotificationItem {
id: string;
type: NotificationType;
content: string;
}