vue select

vue-select

كل ما ترغب في أن يفعله عنصر HTML <select> ، يتم تضمينه في مكون Vue خفيف الوزن، بدون تبعية، وقابل للتوسيع.

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

• وضع العلامات
• التصفية / البحث
• دعم فيوكس
• دعم أجاكس
• دعم إصلاح القطاع الأمني
• يمكن الوصول إليها
• إجمالي ~20 كيلو بايت / ~5 كيلو بايت CSS / ~15 كيلو بايت JS
• حدد خيارات فردية/متعددة
• قابلة للتخصيص باستخدام الفتحات ومتغيرات SCSS
• التبعيات صفر

التوثيق

الوثائق الكاملة والأمثلة متاحة على https://vue-select.org.

• وثائق واجهة برمجة التطبيقات
• قالب Vue 2 CodePen
• قالب Vue 3 CodePen

الرعاة ؟

يستغرق الكثير من الجهد للحفاظ على هذا المشروع. إذا كان قد وفر عليك وقت التطوير، فيرجى التفكير في رعاية المشروع مع رعاة GitHub!

شكرًا جزيلاً للرعاة والمساهمين الذين جعلوا Vue Select ممكنًا!

ابدأ

Vue 3 / Vue Select 4.x-beta

يتوفر دعم Vue 3 على القناة beta : vue-select@beta ، وسيصبح الدعم الافتراضي الجديد عند إصدار v4 . انظر رقم 1579 لمزيد من التفاصيل!

ثَبَّتَ:

yarn add vue-select@beta

# or use npm

npm install vue-select@beta

ثم قم باستيراد وتسجيل المكون:

# main . ts or main . js

import { createApp } from "vue" ;
import App from "./App.vue" ;

import { VueSelect } from "vue-select" ;

createApp ( App )
    . component ( "v-select" , VueSelect )
    . mount ( "#app" ) ;

المكون نفسه لا يتضمن أي CSS. ستحتاج إلى تضمينه بشكل منفصل في Component.vue الخاص بك:

 < style >
@import " vue-select/dist/vue-select.css " ;
</ style >

فيو 2 / فيو حدد 3.x

ثَبَّتَ:

yarn add vue-select

# or use npm

npm install vue-select

ثم قم باستيراد وتسجيل المكون:

 import Vue from "vue" ;
import vSelect from "vue-select" ;

Vue . component ( "v-select" , vSelect ) ;

المكون نفسه لا يتضمن أي CSS. ستحتاج إلى تضمينه بشكل منفصل:

 import "vue-select/dist/vue-select.css" ;

يمكنك أيضًا تضمين vue-select مباشرةً في المتصفح. تحقق من وثائق التحميل من CDN..

رخصة

معهد ماساتشوستس للتكنولوجيا