หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด

Vue-multiselect

เอกสารสำหรับเวอร์ชัน 3

เอกสารสำหรับ v3.0.0 เกือบจะเหมือนกับ V2.x เนื่องจากส่วนใหญ่เข้ากันได้ย้อนหลัง สำหรับเอกสารฉบับเต็มสำหรับ V3 และเวอร์ชันก่อนหน้าลองดู: Vue-multiselect.js.org

คุณสมบัติและคุณสมบัติ:

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

  • เลือกเดียว

  • เลือกหลายตัว

  • การติดแท็ก

  • ดรอปดาวน์

  • การกรอง

  • ค้นหาด้วยคำแนะนำ

  • ตรรกะแบ่งออกเป็น mixins

  • ส่วนประกอบพื้นฐานและการสนับสนุนสำหรับส่วนประกอบที่กำหนดเอง

  • การสนับสนุน V-model

  • Vuex Support

  • สนับสนุนตัวเลือก Async

  • กำหนดค่าได้อย่างสมบูรณ์ (ดูรายการอุปกรณ์ประกอบฉากด้านล่าง)

ติดตั้งและการใช้งานขั้นพื้นฐาน

 npm ติดตั้ง vue-multiselect@next
 <เทมเพลต>
  <div>
    <vuemultiselect v-model = "เลือก": oppiced = "ตัวเลือก">
    </vuemultiselect>
  </div>
</template> <script> นำเข้า VueMultiselect จาก 'Vue-Multiselect'export Default {ส่วนประกอบ: {vuemultiselect}, data () {return {เลือก: null, ตัวเลือก: [' list ',' ของ ',' ตัวเลือก ']}}}} }} </script> <สไตล์ src = "vue-multiselect/dist/vue-multiselect.css"> </style>

jsfiddle

ตัวอย่าง JSFIDDLE - ใช้สิ่งนี้สำหรับการทำซ้ำปัญหา

ตัวอย่าง

เลือก / ดรอปดาวน์เดี่ยว

 <vuemultiselect
  : model-value = "value"
  : ตัวเลือก = "แหล่งที่มา"
  : searchable = "false"
  : close-on-select = "false"
  : อนุญาต-ว่าง = "เท็จ"
  @UpDate: model-value = "updateSelected"
  label = "ชื่อ"
  placeholder = "เลือกหนึ่ง"
  track-by = "ชื่อ"/>

เลือกเดียวด้วยการค้นหา

 <vuemultiselect
  V-model = "value"
  : ตัวเลือก = "แหล่งที่มา"
  : close-on-select = "true"
  : clear-on-select = "false"
  placeholder = "เลือกหนึ่ง"
  label = "ชื่อ"
  track-by = "ชื่อ"/>

เลือกหลายรายการด้วยการค้นหา

 <vuemultiselect
  V-model = "Multivalue"
  : ตัวเลือก = "แหล่งที่มา"
  : multiple = "true"
  : close-on-select = "true"
  ตัวยึด = "เลือก"
  label = "ชื่อ"
  track-by = "ชื่อ"/>

การติดแท็ก

พร้อมเหตุการณ์ @tag

 <vuemultiselect
  v-model = "taggingselected"
  : ตัวเลือก = "TaggingOptions"
  : multiple = "true"
  : taggable = "true"
  @tag = "addTag"
  tag-placeholder = "เพิ่มสิ่งนี้เป็นแท็กใหม่"
  placeHolder = "พิมพ์เพื่อค้นหาหรือเพิ่มแท็ก"
  label = "ชื่อ"
  track-by = "code"/>
 addTag (newtag) {
  const tag = {ชื่อ: newtag, รหัส: newtag.substring (0, 2) + math.floor ((math.random () * 10000000)))
  -
  this.taggingoptions.push (แท็ก)
  this.taggingselected.push (แท็ก)}

แบบอะซิงโครนัสดรอปดาวน์

 <vuemultiselect
  v-model = "SelectedCountries"
  : ตัวเลือก = "ประเทศ"
  : multiple = "multiple"
  : searchable = "searchable"
  @search-change = "asyncFind"
  placeholder = "type to search"
  label = "ชื่อ"
  track-by = "code">
  <เทมเพลต #Noresult>
    อ๊ะ! ไม่พบองค์ประกอบ พิจารณาเปลี่ยนคำค้นหา
  </แม่แบบ>
</vuemultiselect>
 วิธีการ: {
  asyncFind (Query) {this.countries = findService (Query)
  -

ขอบคุณเป็นพิเศษ

ขอบคุณ Matt Elen ที่ให้การสนับสนุนเวอร์ชันนี้!

การอัพเกรด Vue 3 ของส่วนประกอบ Vue-Mulitselect ของ @shentao ความคิดคือเมื่อคุณอัปเกรดเป็น Vue 3 คุณสามารถสลับส่วนประกอบทั้งสองออกและทุกอย่างควรทำงาน อย่าลังเลที่จะตรวจสอบเรื่องราวของเราเกี่ยวกับวิธีที่เราอัพเกรดผลิตภัณฑ์ของเราเป็น Vue 3 ในบล็อกของเราที่ suade.org

การบริจาค

 # การกระจายการสร้างพร้อม minificationnpm bundle run# run unit testsnpm test test test
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด