Browse Source

fix v-on chained keyCodes (fix #3478)

Evan You 9 years ago
parent
commit
13ce3a2559
2 changed files with 28 additions and 8 deletions
  1. 23 8
      src/compiler/codegen/events.js
  2. 5 0
      test/unit/modules/compiler/codegen.spec.js

+ 23 - 8
src/compiler/codegen/events.js

@@ -41,25 +41,40 @@ function genHandler (
       ? handler.value
       : `function($event){${handler.value}}`
   } else {
-    let code = 'function($event){'
+    let code = ''
+    const keys = []
     for (const key in handler.modifiers) {
-      code += modifierCode[key] || genKeyFilter(key)
+      if (modifierCode[key]) {
+        code += modifierCode[key]
+      } else {
+        keys.push(key)
+      }
+    }
+    if (keys.length) {
+      code = genKeyFilter(keys) + code
     }
     const handlerCode = simplePathRE.test(handler.value)
       ? handler.value + '($event)'
       : handler.value
-    return code + handlerCode + '}'
+    return 'function($event){' + code + handlerCode + '}'
   }
 }
 
-function genKeyFilter (key: string): string {
-  const code =
-    parseInt(key, 10) || // number keyCode
-    keyCodes[key] || // built-in alias
-    `_k(${JSON.stringify(key)})` // custom alias
+function genKeyFilter (keys: Array<string>): string {
+  const code = keys.length === 1
+    ? normalizeKeyCode(keys[0])
+    : Array.prototype.concat.apply([], keys.map(normalizeKeyCode))
   if (Array.isArray(code)) {
     return `if(${code.map(c => `$event.keyCode!==${c}`).join('&&')})return;`
   } else {
     return `if($event.keyCode!==${code})return;`
   }
 }
+
+function normalizeKeyCode (key) {
+  return (
+    parseInt(key, 10) || // number keyCode
+    keyCodes[key] || // built-in alias
+    `_k(${JSON.stringify(key)})` // custom alias
+  )
+}

+ 5 - 0
test/unit/modules/compiler/codegen.spec.js

@@ -191,6 +191,11 @@ describe('codegen', () => {
       '<input @input.delete="onInput">',
       `with(this){return _h('input',{on:{"input":function($event){if($event.keyCode!==8&&$event.keyCode!==46)return;onInput($event)}}})}`
     )
+    // multiple keycodes (chained)
+    assertCodegen(
+      '<input @keydown.enter.delete="onInput">',
+      `with(this){return _h('input',{on:{"keydown":function($event){if($event.keyCode!==13&&$event.keyCode!==8&&$event.keyCode!==46)return;onInput($event)}}})}`
+    )
     // number keycode
     assertCodegen(
       '<input @input.13="onInput">',