vue cool select

Versi saat ini adalah 3.x , jika Anda mencari 2.x , Anda dapat menemukannya di sini (juga, lihat perubahan yang dapat menyebabkan gangguan).

Pilihan fleksibel

Demo + Dokumentasi

Fitur

• tidak ada ketergantungan

• props (30) memungkinkan Anda untuk menyesuaikan komponen dengan berbagai cara

• slot (13) memungkinkan konten diubah di mana saja

• acara (8) akan memberi tahu Anda tentang segalanya

• pelengkapan otomatis (Anda dapat menggunakan pencarian khusus, Anda juga dapat menonaktifkan input pencarian)

• kontrol keyboard (tidak hanya melalui panah)

• dukungan pada perangkat seluler

• validasi, keadaan kesalahan dan keberhasilan

• dinonaktifkan dan hanya dapat dibaca

• ukuran kecil dan besar (seperti pada bootstrap)

• kemampuan untuk mengatur gaya Anda, Anda dapat menulis tema dari awal. 2 tema: Bootstrap 4 (gaya yang sama), Desain Material

• Dukungan TypeScript

• navigasi tab

• SSR (Rendering Sisi Server)

• secara otomatis menentukan posisi menu yang sesuai jika melampaui area pandang

Tulis saran Anda, senang menambahkan.

Instalasi

yarn add vue-cool-select atau npm install --save vue-cool-select

Mulailah

NPM

1. Impor plugin ini, css (tema) dan tambahkan plugin melalui 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. Gunakan di dalam komponen lain:

 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. Tambahkan ke <template> :

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

Peramban (CDN)

Sertakan vue-cool-select di halaman.

 < 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 " >

Jika Vue terdeteksi di Halaman, plugin akan diinstal secara otomatis.

---

Dokumentasi dan contoh di sini.

TODO

• multi-pilih
• Cakupan tes 100%.

Saya senang menambahkan sesuatu atau meningkatkan, Anda dapat menulis apa yang ingin Anda lihat. Saya juga lebih termotivasi untuk bekerja jika Anda memberi bintang, terima kasih! ?