آموزش ساخت پلاگین گالری تصاویر با Vue

خب تا اینجا پلاگین رو ساختیم و اون رو به فریم‌ورک شناسایی کردیم. میریم سراغ مرحله بعد تا پلاگینمون رو توسعه بدیم 😉

اگه می‌خواین اطلاعات کامل‌تری درباره ساختن یک پلاگین تو ویو داشته باشین، پست زیر رو ببینید:

۳. ساخت کامپوننت‌های پلاگین

همونطور که می‌دونیم، گالری باید یک کامپوننت اصلی داشته باشه. این کامپوننت، نقش یک Container برای تصاویر رو ایفا می‌کنه. همچنین، ما برای تصاویر، می‌خوایم یک کامپوننت جدا بسازیم و اون رو وارد کامپوننت اصلی کنیم. یعنی کد HTML بصورت زیر خواهد شد:

<gallery>
  <gallery-item src="1.jpg" />
  <gallery-item src="2.jpg" />
  <gallery-item src="3.jpg" />
  <gallery-item src="4.jpg" />
</gallery>

توی این کد، کامپوننت gallery، کامپوننت اصلی هست و کامپوننت‌های gallery-item، تصاویر ما هستن که به کامپوننت اصلی پاس داده میشن. اسم کامپوننت gallery-item رو می‌ذاریم کامپوننت فرزند. خیلی زود یاد می‌گیریم که چطوری این کار رو انجام بدیم.

ابتدا کامپوننت اصلی رو می‌سازیم. توی پوشه پلاگینمون، یک پوشه درست می‌کنیم به اسم components تا کامپوننت‌های پلاگین رو توی اون قرار بدیم. تا الان ساختار پوشه‌های برنامه بصورت زیر هست:

|-- src
    |-- plugins
        |-- gallery
            |-- Gallery.js
            |-- components

توی پوشه components یک فایل درست می‌کنیم به اسم Main.vue. این فایل همون کامپوننت اصلی ما هست. کدهای زیر رو بطور موقت به این فایل اضافه می‌کنیم:

<template>

</template>

<script>
export default {}
</script>

خب این کامپوننت رو باید به پلاگین شناسایی کنیم. فایل اصلی پلاگین یعنی Gallery.js رو باز می‌کنیم تا این کار رو انجام بدیم:

const Gallery = {};

Gallery.install = function(Vue, options) {
    Vue.component('gallery', require('./components/Main').default)
};

export { Gallery as default };

به این فایل، کد خط ۴ رو اضافه کردیم. توی این خط، کامپوننت رو با عنوان gallery بصورت سراسری به فریم‌ورک شناسایی کردیم. الان می‌تونیم هر جایی از برنامه از این کامپوننت استفاده کنیم.

مرحله بعد کامپوننت فرزند رو باید بسازیم. یک فایل دیگه به اسم Item.vue به پوشه components اضافه می‌کنیم و با محتویات زیر:

<template>

</template>

<script>
export default {}
</script>

حالا این کامپوننت رو هم باید رجیستر کنیم. فایل اصلی پلاگین یعنی Gallery.js رو باز می‌کنیم و کد خط ۵ رو به اون اضافه می‌کنیم:

const Gallery = {};

Gallery.install = function(Vue, options) {
    Vue.component('gallery', require('./components/Main').default)
    Vue.component('gallery-item', require('./components/Item').default)
};

export { Gallery as default };

خب تا اینجا کامپوننت‌های پلاگین رو هم ساختیم. باید بریم تا کامپوننت‌ها رو یکم شخصی‌سازی و کدهامون رو بهش اضافه کنیم.

برای آشنایی با کامپوننت‌های ویو، می‌تونین پست زیر رو بخونین:

۴. آماده‌سازی پلاگین فرزند

همونطور که بررسی کردیم، هر تصویری که گالریمون داره رو می‌خوایم به عنوان یک کامپوننت در نظر بگیریم. یعنی هر کامپوننت فرزند، نقش یک تصویر رو ایفا می‌کنه. کامپوننت Item.vue رو باز می‌کنیم و به اون دو پراپرتی به اسم‌های src و caption اضافه می‌کنیم (خط ۷):

<template>

</template>

<script>
export default {
  props: ['src', 'caption']
}
</script>

زمانی از پراپرتی‌ها استفاده می‌کنیم که می‌خوایم یک‌سری اطلاعات رو از بیرون به کامپوننت پاس بدیم. ما می‌خوایم آدرس تصویر و یک متن (caption) دلخواه رو از بیرون به کامپوننت پاس بدیم.

قسمت template این فایل رو بصورت زیر تغییر می‌دیم:

<template>
  <div class="gallery-item">
    <img :src="src">
    <p class="caption" v-if="caption">{{ caption }}</p>
  </div>
</template>

که محتویات نهایی فایل Item.vue بصورت زیر هست:

<template>
  <div class="gallery-item">
    <img :src="src">
    <p class="caption" v-if="caption">{{ caption }}</p>
  </div>
</template>

<script>
export default {
  props: ['src', 'caption'],
}
</script>

۵. آماده‌سازی پلاگین اصلی

همونطور که گفتیم، پلاگین اصلی، نقش یک Container رو ایفا می‌کنه. برای اینکه بتونیم کامپوننت‌های فرزند رو توی پلاگین اصلی نشون بدیم، از slot ها استفاده می‌کنیم. فایل Main.vue رو باز می‌کنیم و محتویات زیر رو جایگزین اون می‌کنیم:

<template>
  <div class="gallery">
    <slot />
  </div>
</template>


<script>
export default {

}
</script>

توی مرحله قبل گفتیم که برای پاس دادن اطلاعات به کامپوننت از props استفاده می‌کنیم. استفاده از اسلات (slot) یک روش پیشرفته‌تر برای پاس دادن اطلاعات از بیرون به کامپوننت هست. با اسلات می‌تونیم یک کد شامل HTML رو هم پاس بدیم. تگ <slot> که توی خط ۳ می‌بینین، محلی هست برای اطلاعاتی که از بیرون پاس داده میشن. به صورت، هر چیزی که بین تگ باز و بسته <gallery> قرار بگیره، توی قسمت slot خواهد نشست.

۶. پیاده‌سازی پلاگین

خب حالا وقتشه خروجی چیزایی که نوشتیم رو ببینیم. فایل App.vue که توی مسیر src هست رو باز و محتویات زیر رو جایگزین می‌کنیم:

<template>
  <div id="app">
    <gallery>
      <item-gallery src="/images/1.jpg" caption="Just do it" />
      <item-gallery src="/images/2.jpg" caption="Just did it" />
      <item-gallery src="/images/3.jpg" />
      <item-gallery src="/images/4.jpg" />
      <item-gallery src="/images/5.jpg" />
      <item-gallery src="/images/6.jpg" />
    </gallery>
  </div>
</template>

<script>
export default { }

توی این کد، ابتدا از کامپوننت اصلی یعنی gallery استفاده کردیم. و به تعداد تصاویری که داریم، کامپوننت item-gallery اضافه کردیم. همونطور که گفتیم، چیزی که داخل تگ gallery قرار گرفته، جایگزین قسمت slot توی کامپوننت اصلی میشه.

همچنین دقت کنین که تصاویر رو توی مسیر public/images قرار دادم. هرچند، میشه آدرس‌های دیگه‌ای رو هم به src ها پاس داد. مرحله آخر، مقداری دستورات CSS به کد اضافه می‌کنیم. این دستورات رو به آخر فایل Main.vue و بعد از تگ پایانی <script> اضافه می‌کنیم:

<style>
  .gallery {
    text-align: center;
  }
  .gallery .gallery-item {
    display: inline-block;
    width: 33%;
    margin: 10px;
  }

  .gallery .gallery-item img {
    width: 100%
  }
</style>

حالا با باز کردن آدرس http://localhost:8080 توی مرورگر، چیزی می‌بینیم بصورت زیر خواهد بود:

توی کد بالا، ما ۶ تا تصویر اضافه کردیم. اگه تصاویر ما جای دیگه مثلاً توی data باشه:

// App.vue

export default {
  data() {
    return {
      images: [
        { src: "/images/1.jpg", caption: 'Just do it' },
        { src: "/images/2.jpg", caption: 'Just did it' },
        { src: "/images/3.jpg", caption: '' },
        { src: "/images/4.jpg", caption: '' },
        { src: "/images/5.jpg", caption: '' },
        { src: "/images/6.jpg", caption: '' },
      ]
    }
  }
}

می‌تونیم اونها رو با حلقه بصورت زیر نمایش بدیم:

<template>
  <div id="app">
    <gallery>
      <gallery-item 
        v-for="(image, index) in images"
        :src="image.src"
        :caption="image.caption"
        v-bind:key="index"
      />
    </gallery>
  </div>
</template>

خب دوستان این آموزشی بود که بیشتر سعی داشتم یک سری نکات فنی برای کار با فریم‌ورک Vue رو ارائه بدم. قطعاً میشه به این پلاگین امکانات بیشتری اضافه و اون رو شخصی‌سازی کرد که اونها رو با آموزش‌های متنوع دیگه کار می‌کنیم. امیدوارم استفاده کرده باشید. روزتون خوش 😉