ToastContainer.vue
781 bytes
| 1 | <script setup lang="ts"> |
|---|---|
| 2 | import { useToast } from '@/composables/useToast' |
| 3 | |
| 4 | const { toasts, dismiss } = useToast() |
| 5 | |
| 6 | function iconClass(type: string) { |
| 7 | switch (type) { |
| 8 | case 'success': |
| 9 | return 'bi-check-circle-fill' |
| 10 | case 'error': |
| 11 | return 'bi-x-circle-fill' |
| 12 | case 'warning': |
| 13 | return 'bi-exclamation-triangle-fill' |
| 14 | default: |
| 15 | return 'bi-info-circle-fill' |
| 16 | } |
| 17 | } |
| 18 | </script> |
| 19 | |
| 20 | <template> |
| 21 | <div class="sa-toast-container"> |
| 22 | <div |
| 23 | v-for="toast in toasts" |
| 24 | :key="toast.id" |
| 25 | class="sa-toast" |
| 26 | :class="[`sa-toast-${toast.type}`, { 'sa-toast-dismiss': toast.dismissing }]" |
| 27 | @click="dismiss(toast.id)" |
| 28 | > |
| 29 | <i :class="['bi', iconClass(toast.type)]"></i> |
| 30 | <span>{{ toast.message }}</span> |
| 31 | </div> |
| 32 | </div> |
| 33 | </template> |
| 34 | |