50 lines
1.3 KiB
Vue
50 lines
1.3 KiB
Vue
<template>
|
|
<div class="toast-container position-fixed top-0 end-0 p-3" style="z-index: 1100;">
|
|
<div
|
|
v-for="toast in toasts"
|
|
:key="toast.id"
|
|
class="toast show"
|
|
role="alert"
|
|
>
|
|
<div class="toast-header" :class="headerClass(toast.type)">
|
|
<i :class="iconClass(toast.type)" class="me-2"></i>
|
|
<strong class="me-auto">{{ toast.title }}</strong>
|
|
<button type="button" class="btn-close btn-close-white" @click="remove(toast.id)"></button>
|
|
</div>
|
|
<div class="toast-body">
|
|
{{ toast.message }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { toasts, remove } = useToast()
|
|
|
|
function headerClass(type: string) {
|
|
const classes: Record<string, string> = {
|
|
success: 'bg-success text-white',
|
|
error: 'bg-danger text-white',
|
|
warning: 'bg-warning text-dark',
|
|
info: 'bg-primary text-white'
|
|
}
|
|
return classes[type] || classes.info
|
|
}
|
|
|
|
function iconClass(type: string) {
|
|
const icons: Record<string, string> = {
|
|
success: 'bi bi-check-circle-fill',
|
|
error: 'bi bi-x-circle-fill',
|
|
warning: 'bi bi-exclamation-triangle-fill',
|
|
info: 'bi bi-info-circle-fill'
|
|
}
|
|
return icons[type] || icons.info
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.toast {
|
|
min-width: 300px;
|
|
}
|
|
</style>
|