2
0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-16 09:10:33 +03:00
This commit is contained in:
Jeff
2019-10-25 18:47:33 -07:00
parent 74917d2a5a
commit 4f409522de
3 changed files with 90 additions and 1 deletions
+52
View File
@@ -0,0 +1,52 @@
### Customizing Keydown Behaviour
---
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:
```js
/**
* @param map {Object} Mapped keyCode to handlers { <keyCode>: <callback> }
* @param vm {Vue/Component} Vue Select instance
* @return {Object}
*/
(map, vm) => map,
```
By default, the prop is a noop returning the same object `map` object it receives. This object
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.
### Example: Tag on `comma` and `space`
If I have a taggable input, and I want `comma` or `space` to 'tag' the current option, you could
solve that with map-keydown. Since the tab button already creates tags, we can copy the handler
for keyCode 9.
```vue
<template>
<v-select taggable multiple no-drop :map-keydown="handlers"/>
</template>
<script>
export default {
methods: {
handlers (map, vm) {
const createTag = e => {
e.preventDefault();
vm.typeAheadSelect();
vm.searchEl.focus();
};
return {
...map, // defaults
32: createTag, // space
188: createTag, // comma
};
},
},
};
</script>
```
<custom-handlers></custom-handlers>