vue multiselect

Vue-Multiselect

Документация для версии 3

Документация для v3.0.0 почти такая же, как и для V2.x, так как она в основном обратно совместима. Для полных документов для V3 и предыдущих версий, посмотрите: vue-multiselect.js.org

Особенности и характеристики:

• Нет зависимостей

• Один выбор

• Несколько выборов

• Метка

• Выпадающие

• Фильтрация

• Поиск с предложениями

• Логика разделена на микшины

• Основной компонент и поддержка пользовательских компонентов

• Поддержка V-модели

• Поддержка Vuex

• Асинхронная поддержка

• Полностью настраивается (см. Список реквизитов ниже)

Установить и базовое использование

 NPM Установить Vue-Multiselect@Далее

 <шаблон>
  <div>
    <Vuemultiselect v-model = "selected": options = "options">
    </Vuemultiselect>
  </div>
</template> <script> import vuemultiselect из 'vue-multiselect'export default {components: {vuemultiselect}, data () {return {selected: null, параметры: [' list ',' of 'options']}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}} }} </script> <стиль src = "vue-multiselect/dist/vue-multiselect.css"> </style>

Jsfiddle

Пример jsfiddle - используйте это для воспроизведения выпуска.

Примеры

ОДИН SELECT / DUPDOWD

 <Vuemultiselect
  : model-value = "value"
  : options = "Источник"
  : searchable = "false"
  : закрыть на выбеге = "Неверно"
  : Alling-empty = "false"
  @Update: модель-value = "
  label = "name"
  Placeholder = "Выберите один"
  Track-by = "name"/>

Один выбор с поиском

 <Vuemultiselect
  v-model = "Значение"
  : options = "Источник"
  : close-on-select = "true"
  : clear-on-select = "false"
  Placeholder = "Выберите один"
  label = "name"
  Track-by = "name"/>

Несколько выберите с поиском

 <Vuemultiselect
  v-model = "multivalue"
  : options = "Источник"
  : несколько = "true"
  : close-on-select = "true"
  Placeholder = "выберите"
  label = "name"
  Track-by = "name"/>

Метка

С событием @tag

 <Vuemultiselect
  v-model = "Taggingseled"
  : options = "TaggingOptions"
  : несколько = "true"
  : taggable = "true"
  @Tag = "addtag"
  tag-placeholder = "Добавить это в качестве нового тега"
  Placeholder = "type to Search или добавьте тег"
  label = "name"
  Track-by = "code"/>

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

Асинхронное выпадение

 <Vuemultiselect
  v-model = "SelectedCountries"
  : Options = "Страны"
  : несколько = "несколько"
  : поиск = "
  @search-change = "asyncfind"
  Placeholder = "type to Search"
  label = "name"
  Track-by = "code">
  <Шаблон #Noresult>
    Уп! Элементы не найдены. Подумайте о том, чтобы изменить поисковый запрос.
  </шаблон>
</Vuemultiselect>

 Методы: {
  Asyncfind (Query) {this.countries = findservice (Query)
  }}

Особая благодарность

Спасибо Мэтту Элену за вклад в эту версию!

Обновление Vue 3 компонента @Shentao's Vue-Mulitselect. Идея состоит в том, что когда вы обновляетесь на Vue 3, вы можете поменять два компонента, и все должно просто работать. Не стесняйтесь проверить нашу историю о том, как мы обновили наш продукт до Vue 3 в нашем блоге на suade.org

Внося

 # Распределение сборка с MINIFICANNPM RUN BUNDLE# RUN UNIT TESTSNPM Тест Run