ثبت محلی Directiveها + قدمی پیشرفته‌تر

Local Registration of Directives

0
53
Vue.JS 2: ثبت محلی directive ها + قدمی پیشرفته تر - قسمت 53

تا این قسمت با جزئیات directive ها آشنا شده ایم و می توانیم Directive های خودمان را تعریف کنیم. حتی در جلسه قبل یک modifier را نیز برای خودمان تعریف کرده و از آن روی directive خودمان استفاده کردیم اما هنوز تعدادی از مباحث باقی مانده است. اولین مبحث، ثبت کردن directive ها به صورت محلی است.

برای ثبت محلی directive ها می توانیم دقیقا مانند ثبت محلی کامپوننت ها عمل کنیم. برای مثال به فایل App.vue رفته و تگ های script را برایش تعریف کنید. سپس directive خود را ثبت کنید:

همانطور که می بینید من directive ای به نام local-highlight را در اینجا تعریف کرده ام اما به جای اینکه آن را از فایل دیگری import کرده و سپس به آن بدهم، آن را همینجا تعریف خواهم کرد. در ضمن ما می توانیم شبیه این کار را با کامپوننت ها نیز انجام بدهیم اما کمی دردسر دارد بنابراین پیشنهاد نمی شود.

در مرحله بعد کدهای موجود در main.js را کپی کرده و درون این قسمت قرار می دهم:

سپس یک پاراگراف دیگر را به Template اضافه می کنیم که با این Directive کار کند:

حالا هر دو پاراگراف ما بعد از 3 ثانیه به رنگ قرمز در می آیند. اگر این اتفاق برای شما نیفتاد یک بار صفحه را refresh کنید. اگر باز هم اتفاقی نیفتاد یعنی قسمتی از کدها را اشتباه نوشته اید. همانطور که قول داده بودم در این directive جدید روی دو مسئله تمرکز خواهیم کرد:

  • پاس دادن چندین modifier
  • استفاده از مقادیر پیشرفته تر از یک رشته مانند red

برای حالت اول می خواهم کاری کنم که علاوه بر قرمز شدن، پاراگراف ها به حالت چشمک زن نیز در بیایند. اینجاست که باید modifier دوم خود به نام blink را تعریف کنم بنابراین در همان فایل App.vue می گویم:

سپس در قسمت Script وجودِ این modifier را بررسی می کنم:

توضیحات این کد:

در ابتدا با یک شرط ساده if وجود blink را بررسی کرده ام. در صورتی که blink وجود نداشته باشد به قسمت else در این شرط وارد می شویم که همان کدهای قبلی است و من آن ها را درون else قرار داده ام. در صورتی که blink وجود داشته باشد سه خصوصیت تعریف می کنیم:

  • mainColor که رنگ اول ما خواهد بود و از سمت کاربر دریافت می شود.
  • secondColor که رنگ دوم ماست و به صورت دستی روی آبی تنظیم شده است.
  • currentColor که رنگ فعلی ما است و در ابتدا به صورت پیش فرض روی mainColor تنظیم شده است.

قرار است کاری کنیم که پاراگراف بین این دو رنگ چشمک بزند. حالا یک تابع setTimeout را تعریف کرده ایم که دقیقا همان کار قبلی را می کند (آن را از قسمت Else کپی کرده ام). تنها تفاوت اینجاست که یک interval را داریم که هر یک ثانیه اجرا می شود. این interval رنگ ها را در هر ثانیه برعکس می کند، یعنی اگر currentColor برابر mainColor بود آن را روی secondColor و اگر روی secondColor بود آن را روی mainColor می گذارد. با این کار رنگ ها هر یک ثانیه تغییر می کنند!

حالا بهتر است بتوانیم خودمان رنگ ها و زمان چشمک زدن را انتخاب کنیم. به طور مثال:

یعنی مقادیر mainColor و secondColor و بازه زمانی چشمک زدن (Delay) را به صورت یک شیء به این directive پاس داده ایم. حالا می توانیم کد script خود را نیز به روز رسانی کنیم. در ابتدا برای رنگ ها:

و سپس برای مدت interval می گوییم:

یعنی به جای عدد 1000 مقدار binding.value.delay را قرار داده ایم. در نهایت باید قسمت else را نیز به روز رسانی کنیم:

حالا برنامه ما بدون مشکل در مرورگر چشمک می زند. دانلود سورس کد کل این فصل.

ترتیبی که روکسو برای یادگیری مطالب سری آموزش رایگان Vue js از صفر تا صد به شما توصیه می‌کند:

ارسال دیدگاه

لطفا دیدگاه خود را وارد کنید!
نام خود را وارد کنید