2
0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-19 09:50:33 +03:00

update docs

This commit is contained in:
Jeff
2019-11-07 17:15:48 -08:00
committed by Jeff
parent 8cce5e0ea2
commit af424159f7
3 changed files with 53 additions and 47 deletions
+12 -17
View File
@@ -1,10 +1,10 @@
<template> <template>
<v-select <v-select
taggable taggable
multiple multiple
no-drop no-drop
:map-keydown="handlers" :map-keydown="handlers"
placeholder="try tagging with space or comma to submit" placeholder="enter an email"
/> />
</template> </template>
@@ -12,19 +12,14 @@
export default { export default {
name: 'CustomHandlers', name: 'CustomHandlers',
methods: { methods: {
handlers (map, vm) { handlers: (map, vm) => ({
const createTag = e => { ...map, 50: e => {
e.preventDefault(); e.preventDefault();
vm.typeAheadSelect(); if( e.key === '@' && vm.search.length > 0 ) {
vm.searchEl.focus(); vm.search = `${vm.search}@gmail.com`;
}; }
},
return { }),
...map, // defaults
32: createTag, // space
188: createTag, // comma
};
},
}, },
}; };
</script> </script>
+40 -29
View File
@@ -1,13 +1,19 @@
### Customizing Keydown Behaviour ### Customizing Keydown Behaviour
--- ---
## `selectOnKeyCodes`
## `mapKeyDown`
Vue Select provides the `map-keydown` Function prop to allow for customizing the components response to Vue Select provides the `map-keydown` Function prop to allow for customizing the components response to
keydown events while the input has focus. Here's the default function definition: keydown events while the search input has focus.
```js ```js
/** /**
* @param map {Object} Mapped keyCode to handlers { <keyCode>: <callback> } * @param map {Object} Mapped keyCode to handlers { <keyCode>:<callback> }
* @param vm {Vue/Component} Vue Select instance * @param vm {VueSelect}
* @return {Object} * @return {Object}
*/ */
(map, vm) => map, (map, vm) => map,
@@ -17,36 +23,41 @@ By default, the prop is a noop returning the same object `map` object it rece
maps keyCodes to handlers: `{ <keyCode>: <callback> }`. Modifying this object can override default maps keyCodes to handlers: `{ <keyCode>: <callback> }`. Modifying this object can override default
functionality, or add handlers for different keys that the component doesn't normally listen for. functionality, or add handlers for different keys that the component doesn't normally listen for.
### Example: Tag on `comma` and `space` **Default Handlers**
If I have a taggable input, and I want `comma` or `space` to 'tag' the current option, you could ```js
solve that with map-keydown. Since the tab button already creates tags, we can copy the handler // delete
for keyCode 9. 8: e => this.maybeDeleteValue()
```vue // tab
<template> 9: e => this.onTab()
<v-select taggable multiple no-drop :map-keydown="handlers"/>
</template>
<script> // enter
export default { 13: e => {
methods: { e.preventDefault();
handlers (map, vm) { return this.typeAheadSelect();
const createTag = e => { }
e.preventDefault();
vm.typeAheadSelect();
vm.searchEl.focus();
};
return { // esc
...map, // defaults 27: e => this.onEscape()
32: createTag, // space
188: createTag, // comma // up
}; 38: e => {
}, e.preventDefault();
}, return this.typeAheadUp();
}; }
</script>
// down
40: e => {
e.preventDefault();
return this.typeAheadDown();
}
``` ```
### Example: Autocomplete Email Addresses
This is example listens for the `@` key, and autocompletes an email address with `@gmail.com`.
<<< @/.vuepress/components/CustomHandlers.vue
<custom-handlers></custom-handlers> <custom-handlers></custom-handlers>
+1 -1
View File
@@ -492,7 +492,7 @@
type: Function, type: Function,
/** /**
* @param map {Object} * @param map {Object}
* @param vm {Vue/Component} * @param vm {VueSelect}
* @return {Object} * @return {Object}
*/ */
default: (map, vm) => map, default: (map, vm) => map,