الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

vue-multiselect

توثيق الإصدار 3

الوثائق لـ V3.0.0 هي نفسها تقريبًا بالنسبة إلى V2.x لأنها تتوافق في الغالب. للحصول على مستندات كاملة لـ V3 والإصدارات السابقة ، تحقق من: vue-multiselect.js.org

الميزات والخصائص:

  • لا تبعيات

  • اختيار واحد

  • مجموعة مختارة متعددة

  • وضع العلامات

  • المنسدلة

  • تصفية

  • ابحث مع الاقتراحات

  • ينقسم المنطق إلى mixins

  • المكون الأساسي ودعم المكونات المخصصة

  • V-Model Support

  • دعم Vuex

  • دعم خيارات ASYNC

  • قابلة للتكوين بالكامل (انظر قائمة الدعائم أدناه)

التثبيت والاستخدام الأساسي

 NPM تثبيت vue-multiselect@التالي
 <قالب>
  <viv>
    <vuemultiselect v-model = "select": Options = "Options">
    </vuemultiselect>
  </div>
</fulsplate> <script> استيراد vuemultiselect من 'vue-multiselect'export الافتراضي {مكونات: {vuemultiselect} ، data () {return {select: null ، الخيارات: [' list '،' ، '،']}} }} </script> <النمط src = "vue-multiselect/dist/vue-multiselect.css"> </style>

JSfiddle

مثال jsfiddle - استخدم هذا لتكاثر القضية.

أمثلة

اختيار واحد / القائمة المنسدلة

 <vuemultiselect
  : قيمة النموذج = "القيمة"
  : خيارات = "المصدر"
  : قابلة للبحث = "خطأ"
  : Close-On-Select = "false"
  : السماح repty = "false"
  @update: نموذج النموذج = "updateselected"
  label = "الاسم"
  العنصر النائب = "حدد واحد"
  Track-By = "name"/>

حدد واحد مع البحث

 <vuemultiselect
  V-Model = "Value"
  : خيارات = "المصدر"
  : Close-On-Select = "True"
  : clear-on-select = "false"
  العنصر النائب = "حدد واحد"
  label = "الاسم"
  Track-By = "name"/>

مجموعة محددة متعددة مع البحث

 <vuemultiselect
  v-model = "multivalue"
  : خيارات = "المصدر"
  : multip = "true"
  : Close-On-Select = "True"
  العنصر النائب = "اختيار البعض"
  label = "الاسم"
  Track-By = "name"/>

وضع العلامات

مع الحدث @tag

 <vuemultiselect
  v-model = "taggingselected"
  : خيارات = "TaggingOptions"
  : multip = "true"
  : taggable = "صحيح"
  @tag = "addtag"
  TagPlaceholder = "أضف هذا كعلامة جديدة"
  العنصر النائب = "اكتب للبحث أو إضافة علامة"
  label = "الاسم"
  Track-By = "Code"/>
 addtag ​​(newtag) {
  const tag = {name: newtag ، الكود: newtag.substring (0 ، 2) + Math.Floor ((Math.Random () * 10000000))
  }
  this.taggingoptions.push (علامة)
  this.taggingselected.push (tag)} ،

المنسدلة غير المتزامنة

 <vuemultiselect
  v-model = "selectCountries"
  : خيارات = "البلدان"
  : multip = "متعددة"
  : قابلة للبحث = "قابلة للبحث"
  @Search-Change = "Asyncfind"
  العنصر النائب = "اكتب للبحث"
  label = "الاسم"
  Track-By = "Code">
  <قالب #noresult>
    أُووبس! لم يتم العثور على عناصر. النظر في تغيير استعلام البحث.
  </template>
</vuemultiselect>
 طُرق: {
  Asyncfind (query) {this.countries = findService (Query)
  }}

شكر خاص

بفضل مات إيلين للمساهمة في هذا الإصدار!

A Vue 3 ترقية لمكون @Shentao's Vue-Mulitselect. الفكرة هي أنه عند الترقية إلى Vue 3 ، يمكنك تبديل المكونين ، ويجب أن يعمل كل شيء ببساطة. لا تتردد في التحقق من قصتنا حول كيفية ترقية منتجاتنا إلى Vue 3 على مدونتنا على suade.org

المساهمة

 # بناء التوزيع مع MinificationNPM RUN BUNDLE# RUN TESTSNPM RUN TEST
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل