Vuejs Toast Notification App
فهاد ل projet الجديد غادي نقادوا Vuejs Toast Notification App ف Toast Notification هي رسالة لي كتعرض للمستخدم فاش كيدير واحد ل action ولي كتكون كتعبر على واحد الحالة إما نجاح فشل تحذير أو معلومة بغيتي المستخدم يعرفها.
نظرة سريعة بالفيديو
1- إضافة ToastHeader Component
أول حاجة زيد projet جديد غادي نخدموا ب vite لي هي واحد tool لي كتخليك تزيد les projets ديالك بطريقة سريعة وسهلة.
باش تزيد ل projet دير هاد ل commande :
npm create vite@latest my-vue-app -- --template vue
بدل my-vue-app بالإسم لي بغيتي.
من بعد ف src زيد dossier components فيه زيد fichier سميه ToastHeader.vue ولي فيه هاد الكود :
//
<template>
<div class="toast-header text-white" :class="toast.bgColor">
<i :class="toast.icon"></i>
<strong class="me-auto">{{toast.title}}</strong>
<small>{{toast.time}}</small>
<button type="button" class="btn-close btn-close-white"
@click="$emit('hide')"></button>
</div>
</template>
<script>
export default {
emits: ['hide'],
props:{
toast: {
type: Object,
default: function () {
return {
toast: {
icon: '',
title: '',
time: '',
message: '',
bgColor: '',
},
}
}
}
}
}
</script>
2- إضافة ToastBody Component
من بعد فنفس dossier components زيد fichier سميه ToastBody.vue ولي فيه هاد الكود :
//
<template>
<div class="toast-body">
{{message}}
</div>
</template>
<script>
export default {
props: {
message: {
type: String,
required: true
}
}
}
</script>
3- إضافة Toast Component
من بعد فنفس dossier components زيد fichier سميه Toast.vue ولي فيه هاد الكود :
//
<template>
<div class="container my-4">
<div class="row">
<div class="col-md-12 d-flex justify-content-start">
<button class="btn btn-sm btn-success me-2"
@click="successToast">Success</button>
<button class="btn btn-sm btn-danger me-2"
@click="dangerToast">Danger</button>
<button class="btn btn-sm btn-warning me-2"
@click="warningToast">Warning</button>
<button class="btn btn-sm btn-info me-2"
@click="infoToast">Info</button>
</div>
</div>
<div class="toast-container position-absolute" :class="position">
<div class="toast" :class="show">
<ToastHeader
:toast="toast"
@hide="hideToast"
/>
<ToastBody :message="toast.message" />
</div>
</div>
</div>
</template>
<script>
import ToastHeader from './ToastHeader.vue';
import ToastBody from './ToastBody.vue';
import moment from 'moment';
export default {
data() {
return {
toast: {
icon: '',
title: '',
time: '',
message: '',
bgColor: '',
},
show: '',
position: '',
timeout: null
}
},
components:{
ToastHeader,
ToastBody
},
watch: {
show() {
if(this.timeout){
clearTimeout(this.timeout);
}
this.timeout = setTimeout(() => {
this.show = '';
this.position = '';
},3000);
}
},
methods:{
successToast(){
this.show = 'show';
this.position = 'top-0 end-0';
this.toast = {
icon: 'fa-solid fa-check me-2',
time: moment().fromNow(),
title: 'success',
bgColor: 'bg-success',
message: 'Message sent successfully'
}
},
dangerToast(){
this.show = 'show';
this.position = 'bottom-0 start-0';
this.toast = {
icon: 'fa-solid fa-bolt me-2',
time: moment().fromNow(),
title: 'danger',
bgColor: 'bg-danger',
message: 'Error try later again'
}
},
warningToast(){
this.show = 'show';
this.position = 'top-0 start-50 translate-middle-x';
this.toast = {
icon: 'fa-solid fa-exclamation me-2',
time: moment().fromNow(),
title: 'warning',
bgColor: 'bg-warning',
message: 'Warning check your info'
}
},
infoToast(){
this.show = 'show';
this.position = 'bottom-0 end-0';
this.toast = {
icon: 'fa-solid fa-info me-2',
time: moment().fromNow(),
title: 'info',
bgColor: 'bg-info',
message: 'We are away for 2 days'
}
},
hideToast(){
this.show = '';
this.position = '';
},
}
}
</script>
4- تعديل ل App Component
منبعد غادي نديرو تعديل على ل App component ونزيدو فيه هاد الكود:
//
<template>
<Toast />
</template>
<script>
import Toast from './components/Toast.vue';
export default {
components:{
Toast,
}
}
</script>
5- إضافة Bootstrap 5 & Font Awesome
من بعد ف index.html غادي نزيدو روابط ديال Bootstrap 5 & Font Awesome.
باش ت démarrer serveur دير npm run dev
الكود ديال الملف بعد التعديل :
//
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Toast App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>