vue multiselect

vue-multiSelect

버전 3에 대한 문서

v3.0.0에 대한 문서는 대부분 뒤로 호환되는 v2.x와 거의 동일합니다. V3 및 이전 버전의 전체 문서에 대해서는 다음을 확인하십시오. vue-multiselect.js.org

특징 및 특성 :

• 의존성 없음

• 단일 선택

• 다중 선택

• 태깅

• 드롭 다운

• 필터링

• 제안으로 검색하십시오

• 논리는 믹스 인으로 분리됩니다

• 기본 구성 요소 및 사용자 정의 구성 요소 지원

• V- 모델 지원

• Vuex 지원

• 비동기 옵션 지원

• 완전히 구성 가능 (아래 소품 목록 참조)

설치 및 기본 사용

 npm vue-multiselect@next를 설치하십시오

 <emplate>
  <div>
    <vuemultiselect v-model = "selected": 옵션 = "옵션">
    </vuemultiselect>
  </div>
</template> <cript> 'vue-multiselect'export default {components : {vuemultisElect}, data () {return {selected : null, 옵션 :', '옵션']}에서 vuemultiselect 가져옵니다. }} </script> <스타일 src = "vue-multiselect/dist/vue-multiselect.css"> </style>

jsfiddle

예제 JSFIDDLE - 문제 재생산에 이것을 사용하십시오.

예

단일 선택 / 드롭 다운

 <vuemultiselect
  : model-value = "value"
  : 옵션 = "소스"
  : 검색 가능 = "false"
  : 가까운 선택 = "false"
  : allow-empty = "false"
  @update : model-value = "updateelected"
  레이블 = "이름"
  자리 표시 자 = "하나 선택"
  트랙 바이 = "이름"/>

검색으로 단일 선택

 <vuemultiselect
  v-model = "value"
  : 옵션 = "소스"
  : 가까운 선택 = "true"
  : clear-on-select = "false"
  자리 표시 자 = "하나 선택"
  레이블 = "이름"
  트랙 바이 = "이름"/>

검색으로 다중 선택

 <vuemultiselect
  v-model = "multivalue"
  : 옵션 = "소스"
  : multiple = "true"
  : 가까운 선택 = "true"
  자리 표시 자 = "일부 선택"
  레이블 = "이름"
  트랙 바이 = "이름"/>

태깅

@tag 이벤트와 함께

 <vuemultiselect
  v-model = "taggingselected"
  : 옵션 = "TaggingOptions"
  : multiple = "true"
  : taggable = "true"
  @tag = "addtag"
  tag-placeholder = "이것을 새 태그로 추가하십시오"
  자리 표시기 = "태그 검색 또는 추가 유형"
  레이블 = "이름"
  트랙 바이 = "코드"/>

 AddTag (newtag) {
  const tag = {이름 : NewTag, 코드 : NewTag.SubString (0, 2) + Math.floor ((Math.random () * 100000000)
  }
  this.taggingoptions.push (tag)
  this.taggingselected.push (tag)},

비동기 드롭 다운

 <vuemultiselect
  v-model = "selectedCountries"
  : 옵션 = "국가"
  : Multiple = "Multiple"
  : 검색 가능 = "검색 가능"
  @search-change = "asyncfind"
  자리 표시기 = "검색 유형"
  레이블 = "이름"
  트랙 바이 = "코드">
  <템플릿 #NORESULT>
    죄송합니다! 찾은 요소가 없습니다. 검색 쿼리 변경을 고려하십시오.
  </템플릿>
</vuemultiselect>

 방법 : {
  asyncfind (query) {this.countries = findservice (query)
  }}

특별한 감사

이 버전에 기여한 Matt Elen에게 감사합니다!

@shentao의 vue-mulitselect 구성 요소의 vue 3 업그레이드. 아이디어는 VUE 3으로 업그레이드 할 때 두 구성 요소를 교체 할 수 있으며 모든 것이 단순히 작동해야한다는 것입니다. Suade.org 블로그에서 제품을 Vue 3으로 업그레이드 한 방법에 대한 이야기를 확인하십시오.

기여

 # MINIFICATIONNPM RUN RUN BHINDLE# 실행 장치 testsnpm 실행 테스트와 함께 배포 빌드