mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-22 10:30:34 +03:00
better readme
This commit is contained in:
@@ -2,14 +2,47 @@
|
|||||||
|
|
||||||
Rather than bringing in jQuery just to use Select2 or Chosen, this Vue.js component provides similar functionality without the extra overhead of jQuery.
|
Rather than bringing in jQuery just to use Select2 or Chosen, this Vue.js component provides similar functionality without the extra overhead of jQuery.
|
||||||
|
|
||||||
|
## Demo
|
||||||
|
[http://sagalbot.github.io/vue-select/](http://sagalbot.github.io/vue-select/)
|
||||||
|
|
||||||
#### Features
|
## Install / Usage
|
||||||
- bootstrap styling
|
``` bash
|
||||||
- typeahead auto-completion
|
$ npm install sagalbot/vue-select
|
||||||
- options param accepts simple arrays, and arrays of objects: `['foo','bar']` or `[{label: 'Foo', value: 'foo'}, {label: 'Bar', value: 'bar'}]`
|
```
|
||||||
|
|
||||||
|
```
|
||||||
|
<template>
|
||||||
|
<div id="myApp">
|
||||||
|
<v-select :value.sync="selected" :options="options"></v-select>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import vSelect from 'vue-select'
|
||||||
|
export default {
|
||||||
|
components: {vSelect},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
selected: null,
|
||||||
|
options: ['foo','bar','baz']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Todos:
|
||||||
|
- fix layout issues with multiple selections
|
||||||
|
- tags overflow outside `.dropdown`
|
||||||
|
- search input overflows outside `.dropdown`
|
||||||
|
- `search` prop should be optional
|
||||||
|
- `simple` prop that disables `search` and keeps a static `placeholder` regardless of current selection (useful for things like icon button dropdowns)
|
||||||
|
- less opinionated styles / only include css necessary to acheive layout (no colors, etc)
|
||||||
|
- ability to pre-select options when using `[{label: 'Foo', value: 'foo'}]` syntax (already works with `['foo','bar','baz']` syntax
|
||||||
|
- more tests!!
|
||||||
|
|
||||||
|
|
||||||
## Build Setup
|
## Build Setup for Contributing
|
||||||
|
|
||||||
``` bash
|
``` bash
|
||||||
# install dependencies
|
# install dependencies
|
||||||
@@ -18,9 +51,12 @@ npm install
|
|||||||
# serve with hot reload at localhost:8080
|
# serve with hot reload at localhost:8080
|
||||||
npm run dev
|
npm run dev
|
||||||
|
|
||||||
# build for production with minification
|
# build for production without minification
|
||||||
npm run build
|
npm run build
|
||||||
|
|
||||||
|
# build for production with minification
|
||||||
|
npm run uglify
|
||||||
|
|
||||||
# lint all *.js and *.vue files
|
# lint all *.js and *.vue files
|
||||||
npm run lint
|
npm run lint
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user