vue cool select

เวอร์ชันปัจจุบันคือ 3.x หากคุณกำลังมองหา 2.x คุณสามารถค้นหาได้ที่นี่ (ดูการเปลี่ยนแปลงด่วน)

เลือกได้อย่างยืดหยุ่น

การสาธิต + เอกสาร

คุณสมบัติ

• ไม่มีการพึ่งพา

• อุปกรณ์ประกอบฉาก (30) ช่วยให้คุณสามารถปรับแต่งส่วนประกอบได้หลายวิธี

• ช่อง (13) อนุญาตให้เปลี่ยนเนื้อหาได้ทุกที่

• กิจกรรม (8) จะแจ้งให้คุณทราบเกี่ยวกับทุกสิ่ง

• เติมข้อความอัตโนมัติ (คุณสามารถใช้การค้นหาที่กำหนดเอง คุณยังสามารถปิดการใช้งานการป้อนข้อมูลการค้นหา)

• การควบคุมด้วยแป้นพิมพ์ (ไม่ใช่แค่ผ่านลูกศร)

• การสนับสนุนบนอุปกรณ์เคลื่อนที่

• การตรวจสอบ สถานะของข้อผิดพลาด และความสำเร็จ

• ปิดการใช้งานและอ่านอย่างเดียว

• ขนาดเล็กและขนาดใหญ่ (เช่นใน bootstrap)

• ความสามารถในการกำหนดสไตล์ของคุณ คุณสามารถเขียนธีมตั้งแต่เริ่มต้นได้ 2 ธีม: Bootstrap 4 (สไตล์เท่ากัน), การออกแบบวัสดุ

• การสนับสนุน TypeScript

• การนำทางแท็บ

• 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%

ฉันยินดีที่จะเพิ่มบางสิ่งบางอย่างหรือปรับปรุงคุณสามารถเขียนสิ่งที่คุณต้องการดูได้ ฉันยังมีแรงจูงใจในการทำงานมากขึ้นหากคุณให้ดาวด้วย ขอบคุณ! -