Vue Academy · درس

مثال على إضافة الإشعارات وToast

بناء إضافة toaster: قائمة انتظار تفاعلية، ومنطق install، وواجهة برمجية عبر provide/inject

الدرس 3 من 413 خطوة

مثال على إضافة الإشعارات وToast درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

الهدف: إضافة لإشعارات toast

سننشئ إضافة لإشعارات toast. فهي تحتفظ بقائمة انتظار تفاعلية للرسائل، وتتيح واجهة notify، وتعرض إشعارات toast على مستوى التطبيق. ويمكن لأي مكوّن تشغيل إشعار toast عبر inject أو composable.

قائمة الانتظار التفاعلية

الحالة الأساسية هي ref تفاعلية تحتوي على مصفوفة من كائنات إشعارات toast. وعند إضافة العناصر أو إزالتها، يتحدّث تلقائيًا كل مكوّن يعرض قائمة الانتظار.

import { ref } from 'vue'

const toasts = ref([])
// each toast: { id, message, type }

معرّفات فريدة باستخدام عدّاد

يحتاج كل إشعار toast إلى id فريد لاستخدامه كمفتاح ولإزالته. استخدموا عدّادًا متزايدًا بدلًا من Date.now() — إذ قد يتصادم إشعاران يُطلَقان في المللي ثانية نفسها بسبب تطابق الطابع الزمني.

let counter = 0

function nextId() {
  // guaranteed unique even for rapid-fire toasts
  return ++counter
}

دالة notify

تمثل notify واجهة برمجة التطبيقات العامة. فهي تضيف إشعار toast جديدًا بمعرّف حديث، وتجدول إزالته بعد مدة زمنية.

function notify(message, type = 'info', duration = 3000) {
  const id = nextId()
  toasts.value.push({ id, message, type })
  setTimeout(() => dismiss(id), duration)
  return id
}

إغلاق إشعار toast

تزيل dismiss إشعار toast حسب المعرّف، وذلك بترشيحه خارج المصفوفة التفاعلية. وتُبقي إعادة إسناد toasts.value على التفاعلية سليمة.

function dismiss(id) {
  toasts.value = toasts.value.filter(t => t.id !== id)
}

تجميع العناصر في خدمة

اجمعوا الحالة والدوال في كائن خدمة واحد. وهذا الكائن هو ما ستوفره الإضافة للتطبيق.

const toastService = {
  toasts,      // reactive ref (read in the UI)
  notify,      // create a toast
  dismiss      // remove a toast
}

أسلوب install في الإضافة

يوفّر install في الإضافة الخدمة عبر app.provide حتى يتمكن أي مكوّن من حقنها. ونُصدّر مفتاحًا من نوع Symbol لمزيد من الأمان.

export const toastKey = Symbol('toast')

export default {
  install(app) {
    app.provide(toastKey, toastService)
    app.config.globalProperties.$toast = toastService
  }
}

تسجيل حاوية إشعارات toast

يمكن للإضافة أيضًا تسجيل مكوّن عام باسم ToastContainer يعرض قائمة الانتظار، بحيث يضيفه المستهلك مرة واحدة بالقرب من جذر التطبيق.

import ToastContainer from './ToastContainer.vue'

install(app) {
  app.provide(toastKey, toastService)
  app.component('ToastContainer', ToastContainer)
}

قالب الحاوية

تقرأ الحاوية قائمة الانتظار المحقونة وتعرض كل إشعار toast، مع معالج لإغلاقه عند النقر يعتمد على المعرّف الفريد.

<script setup>
import { inject } from 'vue'
import { toastKey } from './toast'
const { toasts, dismiss } = inject(toastKey)
</script>

<template>
  <div class="toasts">
    <div v-for="t in toasts" :key="t.id" :class="t.type"
         @click="dismiss(t.id)">
      {{ t.message }}
    </div>
  </div>
</template>

Composable لتسهيل الاستخدام

غلّفوا inject داخل composable باسم useToast حتى تحصل المكوّنات على واجهة واضحة ورسالة خطأ مفيدة إذا لم تُثبَّت الإضافة.

import { inject } from 'vue'
import { toastKey } from './toast'

export function useToast() {
  const service = inject(toastKey)
  if (!service) throw new Error('Toast plugin not installed')
  return service
}

استخدامها في مكوّن

وأخيرًا، يشغّل أي مكوّن الإشعارات عبر composable. سجّلوا app.use(toastPlugin) وضعوا <ToastContainer /> مرة واحدة بالقرب من الجذر.

<script setup>
import { useToast } from './toast'
const { notify } = useToast()

function save() {
  notify('Saved successfully', 'success')
}
</script>

اختبار سريع

اختبروا فهمكم لتصميم إضافة إشعارات toast.

أجب عليها في الدرس التفاعلي

مراجعة

أنشأتم إضافة لإشعارات toast:

تحتفظ مصفوفة ref تفاعلية بقائمة انتظار إشعارات toast
يوفّر العدّاد المتزايد معرّفات فريدة لا تتصادم
تمثل notify واجهة برمجة التطبيقات العامة، بينما تزيل dismiss الإشعار حسب المعرّف
يوفّر install الخدمة عبر app.provide
يغلّف composable باسم useToast الدالة inject لتسهيل استخدامها

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 42
الدروس: 156

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «مثال على إضافة الإشعارات وToast» مجاني؟

نعم — نص درس «مثال على إضافة الإشعارات وToast» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «مثال على إضافة الإشعارات وToast»؟

بناء إضافة toaster: قائمة انتظار تفاعلية، ومنطق install، وواجهة برمجية عبر provide/inject تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «مثال على إضافة الإشعارات وToast»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

بنية الإضافات وapp.use()
الخصائص العامة وprovide/inject في الإضافات
مثال على إضافة الإشعارات وToast
نشر إضافات Vue وكتابة أنواعها

← العودة إلى Vue Academy