ساخت modal های داینامیک در vue راحت تر از همیشه!

سلام. امیدوارم حالتون خوب باشه

همه ی ما، توی پروژه های مختلف مجبور شدیم از modal استفاده کنیم. این modal ها معمولا توی یک تمپلیت و قالب خاصی طراحی شدن و دست برنامه نویس برای تغییرات و شخصی سازی کردن اون ها، تا حدودی بسته میشه.

xmodal v 0.1.0 ?

ما برای رفع این مشکل دنبال راهی بودیم که بتونیم کامپوننت های خودمون رو به صورت داینامیک و بدون محدودیت با توجه دیزاین متناسب با وبسایت خودمون، به عنوان modal استفاده کنیم. این ایده باعث شد که ما پکیج xmodal رو طراحی و پیاده سازی کنیم!

این پکیج بهتون کمک میکنه تا از شر modal های زشت ? از پیش طراحی شده خلاص بشید و کامپوننت خودتون رو رو به عنوان modal، در پروژتون استفاده کنید.

? درواقع xmodal یک چارچوب و wrapper در اطراف کامپوننت های شماست که اون رو به صورت یک modal توی صفحه مورد نظر، بارگذاری میکنه.

به همین راحتی شما میتونید modal های اختصاصی خودتون رو داشته باشید.

مخزن گیتهاب / پیش نمایش

استفاده از این پکیج خیلی راحته، تنها کاری که باید بکنید اینه که یک کامپوننت طراحی بکنید و اون رو به پکیج معرفیش کنید. ( رفرنس بدید ) بقیه کارا به صورت اتوماتیک انجام میشه و حالا شما میتونید از کامپوننت مورد نظرتون به صورت یه modal استفاده کنید. ( مثل گیف بالا )

امکانات این پکیج:

• قابلیت اضافه کردن کامپوننت ها به صورت داینامیک ?
• قابلیت کنترل و تغییر و اضافه کردن animation برای کامپوننت مورد نظر ?️
• قابلیت اضافه کردن تایمر برای کنترل کردن زمان بسته شدن کامپوننت ⏰
• قابلیت قفل کردن (Disable) کامپوننت و باز بسته کردن اون بر اساس شروط v-if v-else ?
• کنترل کردن کامپوننت و تنظیمات اون از طریق global fuctions در هرجای برنامه ?
• قابلیت ست کردن تنظیمات پیش فرض برای همه modal ها ?
• قابلیت ارسال اطلاعات به کامپوننت از طریق props ?
• قابلیت های شخصی سازی رنگ پس زمینه و میزان شفافیت بکگراند modal ?
• و...

این پکیج در npm موجوده و میتونید با دستورات زیر نصبش کنید

npm i xmodal-vue
// or
yarn add xmodal-vue

برای خوندن داکیومنت هم میتونید به مخزن گیت هاب مراجعه کنید. اینجا سرتون رو درد نمیارم.

مخزن گیتهاب / پیش نمایش

ممنونم که وقت گذاشتید و این مطلب رو تا آخر خوندید.

HAPPY CODING ?