vue cool select

الإصدار الحالي هو 3.x ، إذا كنت تبحث عن 2.x ، يمكنك العثور عليه هنا (راجع أيضًا التغييرات العاجلة).

اختيار مرن

العرض التوضيحي + التوثيق

سمات

• لا التبعيات

• تتيح لك الدعائم (30) تخصيص مكون بطرق مختلفة

• تسمح الفتحات (13) بتغيير المحتوى في أي مكان

• الأحداث (8) ستخبرك بكل شيء

• الإكمال التلقائي (يمكنك استخدام البحث المخصص، ويمكنك أيضًا تعطيل إدخال البحث)

• عناصر التحكم في لوحة المفاتيح (ليس فقط من خلال الأسهم)

• الدعم على الأجهزة المحمولة

• التحقق من الصحة وحالة الخطأ والنجاح

• معطل و للقراءة فقط

• الأحجام الصغيرة والكبيرة (كما في bootstrap)

• القدرة على ضبط الأنماط الخاصة بك، يمكنك كتابة الموضوع من الصفر. موضوعان: Bootstrap 4 (أنماط متساوية)، التصميم متعدد الأبعاد

• دعم تايب سكريبت

• التنقل في علامة التبويب

• SSR (العرض من جانب الخادم)

• تحديد الموضع المناسب للقائمة تلقائيًا إذا تجاوزت إطار العرض

اكتب اقتراحاتك، سعيد لإضافتها.

تثبيت

yarn add vue-cool-select أو npm install --save vue-cool-select

ابدأ

الآلية الوقائية الوطنية

1. قم باستيراد هذا المكون الإضافي، CSS (السمة) وأضف مكونًا إضافيًا عبر Vue.use :

 import { CoolSelectPlugin } from 'vue-cool-select'

// paste the line below only if you need "bootstrap" theme
import 'vue-cool-select/dist/themes/bootstrap.css'
// paste the line below only if you need "material-design" theme
import 'vue-cool-select/dist/themes/material-design.css'
// you can also import your theme

Vue . use ( CoolSelectPlugin )

2. استخدم داخل مكون آخر:

 import { CoolSelect } from 'vue-cool-select'

export default {
  components : { CoolSelect } ,
  data ( ) {
    return {
      // simple example of items
      items : [ 'Item 1' , 'Item 2' , 'Item 3' ] ,
      // there will be a selected item
      selected : null
    }
  }
}

3. أضف إلى <template> :

< cool-select
  v-model = " selected "
  : items = " items "
/>

المتصفح (CDN)

قم بتضمين vue-cool-select في الصفحة.

 < script src =" https://unpkg.com/vue-cool-select " > </ script >

<!-- paste the line below only if you need "bootstrap" theme -->
< link rel =" stylesheet " href =" https://unpkg.com/vue-cool-select/dist/themes/bootstrap.css " >
<!-- paste the line below only if you need "material-design" theme -->
< link rel =" stylesheet " href =" https://unpkg.com/vue-cool-select/dist/themes/material-design.css " >

إذا تم اكتشاف Vue في الصفحة، فسيتم تثبيت المكون الإضافي تلقائيًا.

---

التوثيق والأمثلة هنا .

المهام

• تحديد متعدد
• تغطية الاختبارات 100%

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