5 مكتبات Vue.js لا يمكنني الاستغناء عنها

يعرف المطورون المتمرسون أن محاولة توفير الوقت وحل بعض المشكلات في مشروعهم باستخدام حزمة تم إنشاؤها بواسطة شخص آخر في بعض الأحيان يمكن أن ينتهي بها الأمر إلى قضاء وقت أطول مما تم توفيره. المكتبات التي تنظم بشكل صارم تنفيذ آليات معينة ولا تسمح لنا بحل المهام غير العادية بمساعدتها التي تتجاوز ما يعتقد مؤلفوها أنه صحيح ، تجعلنا ، حرفيًا فور تثبيتها ، نأسف لأننا قررنا تجربتها على الإطلاق.







على الرغم من أن هذا حدث لي كثيرًا ، إلا أنه لا يزال لدي قائمة صغيرة من المكتبات المفضلة التي استخدمتها في العديد من المشاريع ، والتي أثبتت أنها مفيدة للغاية بمرور الوقت. لقد جربت العديد من الطرق لحل المشكلات التي تحلها هذه المكتبات. تأثر خياري براحة العمل مع المكتبة ، وتنوع إمكانياتها ، والمظهر الجيد لما يتم الحصول عليه عند استخدامها. نتيجة لذلك ، لدي القائمة التي أريد مشاركتها معك.

1. إخفاء العناصر عن طريق النقر خارجها

يحدث أحيانًا أنك تحتاج إلى تشغيل حدث عندما ينقر المستخدم خارج العنصر. في أغلب الأحيان ، تحتاج إلى القيام بذلك عندما تريد ذلك بحيث يمكنك إغلاق القائمة المنسدلة أو مربع الحوار. هناك حزمة واحدة لتنفيذ هذا السلوك الذي أستخدمه في كل تطبيق أقوم بتطويره تقريبًا.



هذه هي مكتبة vue-clickaway .





إخفاء عنصر عند النقر خارجه

▍ استخدام vue-clickaway

عادةً ما أقوم بتضمين هذه الحزمة في main.js، مما يسمح باستخدامها في جميع أنحاء التطبيق. إذا كان ينطبق فقط على صفحة واحدة أو صفحتين ، فمن المرجح أن تقرر استيراده فقط حيث تحتاجه.



عند استيراده بشكل فردي ، تذكر أنك تقوم باستيراد توجيه وليس مكونًا. وهذا هو ، الشيء الصحيح الذي يجب فعله هو:

directives: { onClickaway }

لكن ليس مثل هذا:

components: { onClickaway }

إليك كيفية إتاحة التوجيه عالميًا (في main.js):

import { directive as onClickaway } from 'vue-clickaway'
Vue.directive('on-clickaway', onClickaway)

إليك كيفية استخدام هذا التوجيه في قالب (هنا ، من أجل التبسيط ، نسخة مختصرة من التعليمات البرمجية):

<button 
    v-on-clickaway="closeYearSelect"
    class="select_option gray"
    @click="toggleYearSelect"
>
    <span class="txt">{{ selectedYear }}</span>
    <span class="arrow blind">Open</span>
</button>

تخيل أن لدي حقلاً كاملاً لاختيار العناصر ، بما في ذلك قائمة العناصر <li>(لا تظهر في الكود). يتم استخدام الزر أعلاه لعرض القائمة على الشاشة ، وعندما أقوم بالنقر خارج هذا العنصر ، فإنني بذلك أقوم باستدعاء الطريقة التي تغلق القائمة. يتيح ذلك تجربة مستخدم أفضل بكثير من الاضطرار دائمًا إلى النقر فوق زر الإغلاق في زاوية العنصر. نحصل على هذه الوظيفة عن طريق إضافة البناء التالي إلى وصف الزر:

v-on-clickaway="closeMethodName"

لاحظ أنه vue-clickawayيجب عليك دائمًا استخدام طريقة تغلق شيئًا ، وليس طريقة تُظهر عنصرًا وتخفيه. ما أعنيه هو أن الطريقة المرتبطة v-on-clickawayيجب أن تبدو كما يلي:

closeMethod() {
 this.showSomething = false
}

لكن هذه الطريقة لا ينبغي أن تكون على النحو التالي:

toggleMethod() {
 this.showSomething = !this.showSomething
}

إذا كنت تستخدم شيئًا مثل طريقة toggleMethod، فعند النقر فوق العنصر خارج العنصر ، ستفتحه وتغلقه ، بغض النظر عن المكان الذي تنقر فيه. ربما لا تحتاجها. لذلك فقط استخدم v-on-clickawayالطرق التي تخفي العناصر.

2. الإخطارات المنبثقة

يمكنك إنشاء إشعارات محمصة باستخدام مجموعة متنوعة من الأدوات ، لكنني معجب كبير بمكتبة vue-toastification .





يتم تنفيذ الإخطار باستخدام vue-toastification



وهو يوفر للمطور عددًا كبيرًا من التخصيصات التي يمكن استخدامها لتنفيذ الإخطارات لمجموعة متنوعة من الاحتياجات. تتيح لك إمكانيات التصميم والرسوم المتحركة لهذه المكتبة إنشاء حلول جذابة وسهلة الاستخدام أفضل مما يمكنك إنشاؤه باستخدام حزم أخرى.

▍ باستخدام طريقة التحميص

vue-toastificationيمكن استخدام المكتبة بعدة طرق. انظر وثائقها للحصول على التفاصيل. على سبيل المثال ، يمكن استخدامه على مستوى المكون ، على المستوى العالمي ، أو حتى بالاشتراك مع Vuex ، في حالة الحاجة إلى إظهار الإخطارات بناءً على التغييرات في حالة التطبيق ، أو على الإجراءات المتعلقة بالخادم.



فيما يلي مثال على الاستخدام العالمي لهذه المكتبة (في main.js):

import Toast from "vue-toastification"
//  
import "vue-toastification/dist/index.css"
Vue.use(Toast, {
  transition: "Vue-Toastification__bounce",
  maxToasts: 3,
  newestOnTop: true,
  position: "top-right",
  timeout: 2000,
  closeOnClick: true,
  pauseOnFocusLoss: true,
  pauseOnHover: false,
  draggable: true,
  draggablePercent: 0.7,
  showCloseButtonOnHover: false,
  hideProgressBar: true,
  closeButton: "button",
  icon: true,
  rtl: false,
})

يمكن التحكم في أنماط الإخطار بشكل منفصل عن طريق تعيينها في كل مكون ، ولكن في الحالة المذكورة أعلاه ، قمت بتوفير أنماط الإخطار في جميع أنحاء التطبيق عن طريق استيرادها إليه main.js. بعد ذلك ، قمت بتهيئة إعدادات الإشعارات. هذا أنقذني من الاضطرار إلى كتابة نفس الرمز في كل مرة أحتاج فيها إلى استخدام الإشعار. تحتوي مكتبة vue-toastification على ملعب كبير للتجريب. على ذلك ، يمكنك رؤية تأثيرات المعلمات على الإشعارات ونسخ ما تحتاجه على الفور إلى التعليمات البرمجية الخاصة بك. هذا بالضبط ما فعلته في المثال أعلاه.



دعنا نفكر في حالتين من حالات الاستخدام لهذه المكتبة.

▍ الخيار 1: استخدام الإشعارات في أحد المكونات (في قالب)

<button @click="showToast">Show toast</button>

هذه هي الطريقة التي تسمى عند النقر فوق الزر:

methods: {
    showToast() {
        this.$toast.success("I'm a toast!")
    }
}

▍ الخيار 2: عرض إشعار عند حدوث خطأ (أو عند نجاح العملية) في Vuex

إليك نموذج التعليمات البرمجية لشرح كيفية استخدامه this._vm.$toast.errorفي Vuex عند حدوث خطأ:

async fetchSomeData({ commit }) {
    const resource_uri = `/endpoint/url`
    try {
        await axios.get(resource_uri).then((response) => {
            commit(SET_DATA, response.data)
        })
    } catch (err) {
        this._vm.$toast.error('Error message: ' + err.message)
    }
}

يمكنك تغيير نوع الإشعار ببساطة عن طريق تغيير اسم الطريقة .errorإلى .success، .infoأو .warning. وإذا لزم الأمر ، يمكنك إزالته تمامًا وتلقي إشعار بالإعدادات الافتراضية.



تسمح إشعارات Toast للمطور بعرض بعض المعلومات بناءً على التغييرات في حالة التطبيق ، أو عند حدوث خطأ غير متوقع. هذا يحسن تجربة المستخدم للتطبيق. تمنح إشعارات Toast المستخدم إشارة مرئية للأحداث أفضل من النماذج أو نوافذ التنبيه القبيحة. في الواقع ، عند العمل مع نافذة ، يحتاج المستخدم إلى النقر بالماوس مرة أخرى لإغلاقها. سيقدر المستخدمون أنك تمنحهم إشارات مرئية تفيد بحدوث خطأ ما ، مما يلغي الحاجة إلى التحديق بلا حول ولا قوة في الشاشة ، في انتظار حدث لن يحدث أبدًا. بالإضافة إلى ذلك ، تعتبر الإخطارات مفيدة في تأكيد نجاح عمليات معينة.

3. العمل مع الجداول

تعد الجداول جزءًا مهمًا جدًا من العديد من تطبيقات الويب. يمكن أن يتسبب اختيار مكتبة جداول بيانات منخفضة الجودة في حدوث الكثير من المشاكل. لقد جربت العديد من المكتبات المماثلة واستقرت على vue-good-table .





مثال على استخدام vue-good-table



أنا واثق من أن هذه المكتبة قادرة على حل معظم مهام عمل الجدول التي يواجهها المطور. واسمه "حسن المائدة" ليس مجرد كلمات. هذه مكتبة جيدة حقًا وتمنحنا ميزات أكثر بكثير مما قد نتوقعه.

▍Using استخدام vue-good-table

في المثال التالي ، أقوم بربط البيانات :rowsبجهاز Vuex getter يسمى getOrderHistory:

<vue-good-table
    class="mx-4"
    :columns="columns"
    :rows="getOrderHistory"
    :search-options="{ enabled: true }"
    :pagination-options="{
        enabled: true,
        mode: 'records',
        perPage: 25,
        position: 'top',
        perPageDropdown: [25, 50, 100],
        dropdownAllowAll: false,
        setCurrentPage: 2,
        nextLabel: 'next',
        prevLabel: 'prev',
        rowsPerPageLabel: 'Rows per page',
        ofLabel: 'of',
        pageLabel: 'page', //   'pages'
        allLabel: 'All'
    }"
>

فيما يلي أوصاف أعمدة الجدول في البيانات المحلية ( data()):

columns: [
    {
        label: 'Order Date',
        field: 'orderDtime',
        type: 'date',
        dateInputFormat: 'yyyy-MM-dd HH:mm:ss',
        dateOutputFormat: 'yyyy-MM-dd HH:mm:ss',
        tdClass: 'force-text-center resizeFont'
    },
    {
        label: 'Order Number',
        field: 'orderGoodsCd',
        type: 'text',
        tdClass: 'resizeFont'
    },
    {
        label: 'Title',
        field: 'orderTitle',
        type: 'text',
        tdClass: 'resizeFont ellipsis'
    },
    {
        label: 'Price',
        field: 'saleAmt',
        type: 'number',
        formatFn: this.toLocale
    },
    {
        label: 'Edit btn',
        field: 'deliveryUpdateYn',
        type: 'button',
        tdClass: 'force-text-center',
        sortable: false
    },
]

هنا labelهو رأس العمود المعروض على الشاشة ، fieldوهذه هي البيانات التي يجب ربطها في Vuex getter.



في المثال أعلاه ، أستخدم بعضًا من قدرة vue-good-table على تخصيص الجداول. هذا ، على سبيل المثال ، تعيين تنسيق تاريخ الإدخال والإخراج (يتيح لي ذلك أخذ وصف كامل للتاريخ والوقت من الخادم وإظهار هذه المعلومات للمستخدمين بتنسيق أكثر ملاءمة). أنا أستخدمه هنا أيضًا formatFnلتنسيق السعر باستخدام طريقة خاصة سميتها toLocale. ثم أقوم بتخصيص مظهر خلايا الجدول من خلال الارتباط tdClassبالفئات التي قمت بتعيينها في العلامة المحلية الخاصة بي<style>... تحتوي حزمة vue-good-table بالفعل على خيارات تخصيص لا حصر لها مضمنة. تتيح لك هذه الإمكانات إنشاء جداول مناسبة لمجموعة متنوعة جدًا من الاستخدامات.

▍ إنشاء القوالب الخاصة بك

تعمل مكتبة vue-good-table أيضًا بشكل جيد مع القوالب التي أنشأها المبرمجون أنفسهم. هذا يعني أنه يمكنك بسهولة تضمين الأزرار أو الحقول لتحديد القيم من قائمة أو أي شيء آخر في خلايا الجدول. للقيام بذلك ، يكفي ، باستخدام التوجيه v-if، للإشارة إلى المكان الذي يجب أن يوجد فيه شيء خاص. فيما يلي مثال على إضافة زر إلى عمود جدول.

<template slot="table-row" slot-scope="props">
    <span v-if="props.column.field === 'cancelYn' && props.row.cancelYn === 'Y' ">
        <BaseButton class="button" @click="showModal">
            Cancel Order
        </BaseButton>
    </span>
</template>

في هذا المثال ، أصف زرًا يفتح نافذة مشروطة. يتم عرضها في الحقل cancelYn(في العمود) إذا كانت قيمة حقل البيانات المقابل متساوية Y.



لإضافة عمود آخر خاص بك إلى الجدول ، تحتاج فقط إلى إضافة v-else-ifبنية بعد علامة الإغلاق التي استخدمت التوجيه v-if(في حالتنا ، إنها علامة <span>). بعد ذلك ، تحتاج إلى وصف منطق العمود الجديد. بشكل عام ، يمكننا القول أن مكتبة vue-good-table يمكن أن تساعد في أي موقف يتعلق بعرض الجداول على صفحات الويب.

4. أداة لاختيار المواعيد

والآن سأخبركم عن مكتبة مصممة لتنظيم اختيار التواريخ. يوجد شيء مشابه في مجموعة كبيرة ومتنوعة من التطبيقات الواقعية. يوجد العديد من المكتبات التي تنفذ هذه الوظيفة أكثر من المكتبات لحل المشكلات الأخرى التي أتحدث عنها هنا. أعود بانتظام إلى مكتبة vue2-datepicker لحل هذه المشكلة .





مثال على استخدام مكتبة vue2-datepicker يسهل تصميم



عناصر تحكم منتقي التاريخ التي تم إنشاؤها باستخدام هذه المكتبة. وهو يدعم الكثير من التخصيصات المتعلقة بتحديد التاريخ ونطاق التاريخ. تتيح لك المكتبة إنشاء عناصر واجهة مستخدم أنيقة ومريحة. حتى أنها تدعم أدوات الترجمة.



لاحظ أنه على الرغم من أن الحزمة تسمى vue2-datepicker ، فلن تواجه مشكلة في استخدامها في التطبيقات المستندة إلى Vue 3 (ينطبق الأمر نفسه على المكتبات الأخرى التي تمت مناقشتها في هذا المنشور).

▍ استخدام vue2-datepicker

يمكن استيراد المكتبة إلى مكون أو تضمينها في قالب.



فيما يلي مثال على استيراده إلى أحد المكونات:

import DatePicker from 'vue2-datepicker';
// 
import 'vue2-datepicker/index.css';

إليك كيفية استخدامه في قالب:

<date-picker
    v-model="dateRange"
    value-type="format"
    range
    @clear="resetList"
    @input="searchDate"
></date-picker>

أنا هنا أستخدم خيارًا rangeيسمح للمستخدم بتحديد النطاقات الزمنية. هنا ، باستخدام توجيه v-model، أوصل البيانات التي يدخلها المستخدمون بالقيمة dateRange. بعد ذلك dateRange، على سبيل المثال ، يمكن استخدام vue-good-table لتخصيص إخراج البيانات في الجدول. أنا أيضا استخدام خيارات الحدث هنا - @clearو @input، واستخدامها لاستدعاء الأساليب، واحدة منها مقالب الجدول ( resetList)، والثاني يرسل طلب إلى الملقم ( searchDate). توفر لنا مكتبة vue2-datepicker العديد من الخيارات والأحداث أكثر مما وصفته هنا. لكن ما قلته هنا ، أستخدمه في أغلب الأحيان.

5. التقييمات

يمكن العثور على أنظمة التصنيف ، على سبيل المثال ، في مواقع مثل Amazon و Rotten Tomatoes. ربما لا تستخدم مثل هذه الأنظمة في كل مشروع ، لكنني ، في كل موقع تحتاج إليه ، أنفذ هذه الميزة باستخدام مكتبة vue-star-rating library . 





مثال على استخدام مكتبة vue-star-rating



قد يبدو أنه من السهل جدًا إنشاء شيء مثل هذا بنفسك. ولكن إذا بحثت في التفاصيل ، فقد تبين أن تصميم مثل هذا التحكم يمكن أن يصبح سريعًا أكثر صعوبة مما قد تتوقعه. تتيح لك هذه المكتبة استخدام صور SVG الخاصة بك لتخصيص شكل الأشكال المستخدمة للتسجيل. يسمح لك بضبط حجم العناصر والمسافة بينها ولونها.



يمكن بسهولة استخدام التصنيف الذي منحه المستخدم لشيء ما باستخدام عنصر التحكم من vue-star-rating v-modelلتمريره إلى المكان الذي تخطط لاستخدامه فيه. يمكن جعل التقديرات قابلة للتغيير أو غير قابلة للتغيير باستخدام معلمة واحدة.



وإذا وجدت أنك بحاجة إلى المزيد من الميزات عند العمل مع هذه المكتبة ، فقم بإلقاء نظرة على حزمة vue-rate-it بواسطة نفس المؤلف.

▍Using باستخدام vue-star-rating

فيما يلي كيفية استخدام هذه المكتبة في قالب (مع خيارات):

<star-rating
    class="star-rating"
    :rating="newReivew.score"
    active-color="#FBE116"
    :star-size="starSize"
    :increment="increment"
    :show-rating="showRating"
    @rating-selected="setRating"
/>

إليك كيفية استيراده إلى أحد المكونات:

import StarRating from 'vue-star-rating'

export default {
    components: {
        StarRating
    },
}

النتيجة

لقد قمنا بتغطية 5 مكتبات لـ Vue. نأمل أن تجد هنا شيئًا مفيدًا لك عند تطوير مشاريعك.



ما هي مكتبات Vue.js التي تستخدمها أكثر من غيرها؟