test/vue
1
0
Fork 0
mirror of https://gitee.com/vuejs/vue.git synced 2024-12-04 13:07:40 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: move keyName alias map to compiler

Browse Source
This commit is contained in:
Evan You 2018-03-07 14:50:35 -05:00
parent 1c8e2e88ed
commit f7311c90b3
3 changed files with 35 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/compiler/codegen/events.js
View File

@ -3,7 +3,7 @@
const fnExpRE = /^([\w$_]+|\([^)]*?\))\s*=>|^function\s*\(/
const simplePathRE = /^[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['[^']*?']|\["[^"]*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*$/
// keyCode aliases
// KeyboardEvent.keyCode aliases
const keyCodes: { [key: string]: number | Array<number> } = {
esc: 27,
tab: 9,
@ -16,6 +16,19 @@ const keyCodes: { [key: string]: number | Array<number> } = {
'delete': [8, 46]
}
// KeyboardEvent.key aliases
const keyNames: { [key: string]: string | Array<string> } = {
esc: 'Escape',
tab: 'Tab',
enter: 'Enter',
space: ' ',
up: 'ArrowUp',
left: 'ArrowLeft',
right: 'ArrowRight',
down: 'ArrowDown',
'delete': ['Backspace', 'Delete']
}
// #4868: modifiers that prevent the execution of the listener
// need to explicitly return null so that we can determine whether to remove
// the listener for .once
@ -140,11 +153,14 @@ function genFilterCode (key: string): string {
if (keyVal) {
return `$event.keyCode!==${keyVal}`
}
const code = keyCodes[key]
const keyCode = keyCodes[key]
const keyName = keyNames[key]
return (
`_k($event.keyCode,` +
`${JSON.stringify(key)},` +
`${JSON.stringify(code)},` +
`$event.key)`
`${JSON.stringify(keyCode)},` +
`$event.key,` +
`${JSON.stringify(keyName)}` +
`)`
)
}

28
src/core/instance/render-helpers/check-keycodes.js
View File

@ -3,18 +3,6 @@
import config from 'core/config'
import { hyphenate } from 'shared/util'
const keyNames: { [key: string]: string | Array<string> } = {
esc: 'Escape',
tab: 'Tab',
enter: 'Enter',
space: ' ',
up: 'ArrowUp',
left: 'ArrowLeft',
right: 'ArrowRight',
down: 'ArrowDown',
'delete': ['Backspace', 'Delete']
}
function isKeyNotMatch<T> (expect: T | Array<T>, actual: T): boolean {
if (Array.isArray(expect)) {
return expect.indexOf(actual) === -1
@ -31,15 +19,15 @@ function isKeyNotMatch<T> (expect: T | Array<T>, actual: T): boolean {
export function checkKeyCodes (
eventKeyCode: number,
key: string,
builtInAlias?: number | Array<number>,
eventKeyName?: string
builtInKeyCode?: number | Array<number>,
eventKeyName?: string,
builtInKeyName?: string | Array<string>
): ?boolean {
const keyCodes = config.keyCodes[key] || builtInAlias
const builtInName: string | Array<string> = keyNames[key]
if (builtInName && keyCodes === builtInAlias && eventKeyName) {
return isKeyNotMatch(builtInName, eventKeyName)
} else if (keyCodes) {
return isKeyNotMatch(keyCodes, eventKeyCode)
const mappedKeyCode = config.keyCodes[key] || builtInKeyCode
if (builtInKeyName && eventKeyName && !config.keyCodes[key]) {
return isKeyNotMatch(builtInKeyName, eventKeyName)
} else if (mappedKeyCode) {
return isKeyNotMatch(mappedKeyCode, eventKeyCode)
} else if (eventKeyName) {
return hyphenate(eventKeyName) !== key
}

14
test/unit/modules/compiler/codegen.spec.js
View File

@ -265,17 +265,17 @@ describe('codegen', () => {
it('generate events with keycode', () => {
assertCodegen(
'<input @input.enter="onInput">',
`with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key))return null;onInput($event)}}})}`
`with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;onInput($event)}}})}`
)
// multiple keycodes (delete)
assertCodegen(
'<input @input.delete="onInput">',
`with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&_k($event.keyCode,"delete",[8,46],$event.key))return null;onInput($event)}}})}`
`with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&_k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete"]))return null;onInput($event)}}})}`
)
// multiple keycodes (chained)
assertCodegen(
'<input @keydown.enter.delete="onInput">',
`with(this){return _c('input',{on:{"keydown":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key)&&_k($event.keyCode,"delete",[8,46],$event.key))return null;onInput($event)}}})}`
`with(this){return _c('input',{on:{"keydown":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter")&&_k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete"]))return null;onInput($event)}}})}`
)
// number keycode
assertCodegen(
@ -285,7 +285,7 @@ describe('codegen', () => {
// custom keycode
assertCodegen(
'<input @input.custom="onInput">',
`with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&_k($event.keyCode,"custom",undefined,$event.key))return null;onInput($event)}}})}`
`with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&_k($event.keyCode,"custom",undefined,$event.key,undefined))return null;onInput($event)}}})}`
)
})
@ -308,12 +308,12 @@ describe('codegen', () => {
it('generate events with generic modifiers and keycode correct order', () => {
assertCodegen(
'<input @keydown.enter.prevent="onInput">',
`with(this){return _c('input',{on:{"keydown":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key))return null;$event.preventDefault();onInput($event)}}})}`
`with(this){return _c('input',{on:{"keydown":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;$event.preventDefault();onInput($event)}}})}`
)
assertCodegen(
'<input @keydown.enter.stop="onInput">',
`with(this){return _c('input',{on:{"keydown":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key))return null;$event.stopPropagation();onInput($event)}}})}`
`with(this){return _c('input',{on:{"keydown":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;$event.stopPropagation();onInput($event)}}})}`
)
})
@ -420,7 +420,7 @@ describe('codegen', () => {
// with modifiers
assertCodegen(
`<input @keyup.enter="e=>current++">`,
`with(this){return _c('input',{on:{"keyup":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key))return null;(e=>current++)($event)}}})}`
`with(this){return _c('input',{on:{"keyup":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;(e=>current++)($event)}}})}`
)
})