socrates/duty-schedule-fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

solve issue #19

Browse Source
This commit is contained in:
Sockenklaus
2021-10-23 08:11:00 +02:00
parent a323cf862a
commit 2851a762a6
5 changed files with 60 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Notification.vue
View File

@@ -1,12 +1,14 @@
<template>
{{notifications}}
<transition-group name="toasts" tag="div" class="toast-container position-absolute top-0 start-50 mt-3 translate-middle-x">
<div v-for="(note, index) in notifications" :key="note.randomKey" class="show toast border-0 text-white" :class="`bg-${note.type}`" role="alert" aria-live="assertive" aria-atomic="true">
<div v-for="(note) in notifications" :key="note[0]" class="show toast border-0 text-white" :class="`bg-${note[1].type}`" role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body">
{{note.text}}
{{note[1].text}}
</div>
<button type="button" @click="destroyAlert(index)" class="btn-close btn-close-white me-2 m-auto"></button>
<button type="button" @click="destroyAlert(note[0])" class="btn-close btn-close-white me-2 m-auto"></button>
</div>
</div>
</transition-group>
@@ -20,8 +22,8 @@ import { storeToRefs } from 'pinia'
const notes = useNotifications()
const { notifications } = storeToRefs(notes)
function destroyAlert(index : number) {
notes.removeAlert(index)
function destroyAlert(id : string) {
notes.remove(id)
}
</script>