vue multiselect

Vue-Multiselect

Dokumentasi untuk Versi 3

Dokumentasi untuk v3.0.0 hampir sama dengan untuk v2.x karena sebagian besar kompatibel ke belakang. Untuk dokumen lengkap untuk V3 dan versi sebelumnya, lihat: vue-multiselect.js.org

Fitur & Karakteristik:

• Tidak ada dependensi

• Single Select

• Beberapa SELECT

• Penandaan

• Dropdown

• Penyaringan

• Cari dengan saran

• Logika terpecah menjadi mixins

• Komponen Dasar dan Dukungan untuk Komponen Kustom

• Dukungan V-Model

• Dukungan Vuex

• Dukungan Opsi Async

• Sepenuhnya dapat dikonfigurasi (lihat daftar alat peraga di bawah)

Instal & Penggunaan Dasar

 NPM menginstal vue-multiselect@selanjutnya

 <lemplate>
  <div>
    <Vuemultiselect v-model = "dipilih": options = "options">
    </vuemultiselect>
  </div>
</lemplate> <script> impor vuemultiselect dari 'vue-multiselect'export default {components: {vuemultiSelect}, data () {return {dipilih: null, opsi: [' daftar ',' dari ',' opsi ']} }} </script> <style src = "vue-multiselect/dist/vue-multiselect.css"> </tyle>

Jsfiddle

Contoh JSFiddle - Gunakan ini untuk reproduksi masalah.

Contoh

Single Select / Dropdown

 <Vuemultiselect
  : model-value = "nilai"
  : opsi = "sumber"
  : dicari = "false"
  : close-on-select = "false"
  : allow-empty = "false"
  @update: model-value = "updateDateDelected"
  Label = "Nama"
  placeholder = "pilih satu"
  track-by = "name"/>

Single Select With Search

 <Vuemultiselect
  V-Model = "Nilai"
  : opsi = "sumber"
  : close-on-select = "true"
  : clear-on-select = "false"
  placeholder = "pilih satu"
  Label = "Nama"
  track-by = "name"/>

Beberapa pilih dengan pencarian

 <Vuemultiselect
  V-Model = "Multivalue"
  : opsi = "sumber"
  : multiple = "true"
  : close-on-select = "true"
  placeholder = "pilih beberapa"
  Label = "Nama"
  track-by = "name"/>

Penandaan

dengan acara @tag

 <Vuemultiselect
  V-Model = "Taggings Selected"
  : opsi = "TaggingOptions"
  : multiple = "true"
  : taggable = "true"
  @tag = "addtag"
  Tag-placeHolder = "Tambahkan ini sebagai tag baru"
  placeholder = "Ketik untuk mencari atau menambahkan tag"
  Label = "Nama"
  track-by = "code"/>

 addtag ​​(newtag) {
  tag const = {name: newtag, kode: newtag.substring (0, 2) + math.floor ((math.random () * 10000000))
  }
  this.taggingoptions.push (tag)
  this.taggingselected.push (tag)},

Dropdown asinkron

 <Vuemultiselect
  V-MODEL = "PELANJUTAN PEREMPUAN"
  : opsi = "negara"
  : multipel = "multipel"
  : dicari = "dapat dicari"
  @pencarian-change = "asyncfind"
  placeholder = "ketik untuk mencari"
  Label = "Nama"
  track-by = "code">
  <template #noresult>
    Ups! Tidak ada elemen yang ditemukan. Pertimbangkan untuk mengubah kueri pencarian.
  </template>
</vuemultiselect>

 Metode: {
  asyncfind (kueri) {this.countries = findservice (kueri)
  }}

Terima kasih khusus

Terima kasih kepada Matt Elen karena telah menyumbangkan versi ini!

Peningkatan Vue 3 dari komponen Vue-Mulitselect @Shentao. Idenya adalah bahwa ketika Anda meningkatkan ke Vue 3, Anda dapat menukar kedua komponen, dan semuanya harus hanya berfungsi. Jangan ragu untuk memeriksa kisah kami tentang bagaimana kami meningkatkan produk kami ke Vue 3 di blog kami di Suade.org

Berkontribusi

 # Distribution Build dengan MinificationNPM Run Bundle# Run Unit TestSNPM Test