36
GitHub - shentao/vue-multiselect: Universal select/multiselect/tagging component...
source link: https://github.com/shentao/vue-multiselect
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
vue-multiselect
Probably the most complete selecting solution for Vue.js 2.0, without jQuery.
Sponsors
Silver
Bronze
Features & characteristics:
- NO dependencies
- Single select
- Multiple select
- Tagging
- Dropdowns
- Filtering
- Search with suggestions
- Logic split into mixins
- Basic component and support for custom components
- V-model support
- Vuex support
- Async options support
- > 95% test coverage
- Fully configurable (see props list below)
Breaking changes:
- Instead of Vue.partial for custom option templates you can use a custom render function.
- The
:key
props has changed to:track-by
, due to conflicts with Vue 2.0. - Support for
v-model
@update
has changed to@input
to also work with v-model:selected
has changed to:value
for the same reason- Browserify users: if you wish to import
.vue
files, please addvueify
transform.
Install & basic usage
npm install vue-multiselect
<template> <div> <multiselect v-model="selected" :options="options"> </multiselect> </div> </template> <script> import Multiselect from 'vue-multiselect' export default { components: { Multiselect }, data () { return { selected: null, options: ['list', 'of', 'options'] } } } </script> <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
JSFiddle
Example JSFiddle – Use this for issue reproduction.
Examples
in jade-lang/pug-lang
Single select / dropdown
multiselect( :value="value", :options="source", :searchable="false", :close-on-select="false", :allow-empty="false", @input="updateSelected", label="name", placeholder="Select one", track-by="name" )
Single select with search
multiselect( v-model="value", :options="source", :close-on-select="true", :clear-on-select="false", placeholder="Select one", label="name", track-by="name" )
Multiple select with search
multiselect( v-model="multiValue", :options="source", :multiple="true", :close-on-select="true", placeholder="Pick some", label="name", track-by="name" )
Tagging
with @tag
event
multiselect( v-model="taggingSelected", :options="taggingOptions", :multiple="true", :taggable="true", @tag="addTag", tag-placeholder="Add this as new tag", placeholder="Type to search or add tag", 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) },
Asynchronous dropdown
multiselect( v-model="selectedCountries", :options="countries", :multiple="multiple", :searchable="searchable", @search-change="asyncFind", placeholder="Type to search", label="name" track-by="code" ) span(slot="noResult"). Oops! No elements found. Consider changing the search query.
methods: { asyncFind (query) { this.countries = findService(query) } }
Contributing
# serve with hot reload at localhost:8080 npm run dev # distribution build with minification npm run bundle # build the documentation into docs npm run docs # run unit tests npm run test # run unit tests watch npm run unit
For detailed explanation on how things work, checkout the guide and docs for vue-loader.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK