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:
@@ -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
@@ -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 no–op 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>
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user