theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(v-on): adjust key modifier behavior to match 2.x

Browse Source
This commit is contained in:
Evan You 2019-11-08 17:50:59 -05:00
parent 61d8941692
commit 7fa676e55f
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
packages/runtime-dom/__tests__/directives/vOn.spec.ts
View File

@ -44,20 +44,32 @@ describe('runtime-dom: v-on directive', () => {
const el = document.createElement('div') const el = document.createElement('div')
const fn = jest.fn() const fn = jest.fn()
// <div @keyup.ctrl.esc="test"/> // <div @keyup.ctrl.esc="test"/>
const nextValue = withKeys(withModifiers(fn, ['ctrl']), ['esc']) const nextValue = withKeys(withModifiers(fn, ['ctrl']), [
'esc',
'arrow-left'
])
patchEvent(el, 'keyup', null, nextValue, null) patchEvent(el, 'keyup', null, nextValue, null)
triggerEvent(el, 'keyup', e => (e.key = 'a')) triggerEvent(el, 'keyup', e => (e.key = 'a'))
expect(fn).not.toBeCalled() expect(fn).not.toBeCalled()
triggerEvent(el, 'keyup', e => { triggerEvent(el, 'keyup', e => {
e.ctrlKey = false e.ctrlKey = false
e.key = 'esc' e.key = 'esc'
}) })
expect(fn).not.toBeCalled() expect(fn).not.toBeCalled()
triggerEvent(el, 'keyup', e => { triggerEvent(el, 'keyup', e => {
e.ctrlKey = true e.ctrlKey = true
e.key = 'Escape' e.key = 'Escape'
}) })
expect(fn).toBeCalled() expect(fn).toBeCalledTimes(1)
triggerEvent(el, 'keyup', e => {
e.ctrlKey = true
e.key = 'ArrowLeft'
})
expect(fn).toBeCalledTimes(2)
}) })
test('it should support "exact" modifier', () => { test('it should support "exact" modifier', () => {

12
packages/runtime-dom/src/directives/vOn.ts
View File

@ -1,3 +1,5 @@
import { hyphenate } from '@vue/shared'
const systemModifiers = ['ctrl', 'shift', 'alt', 'meta'] const systemModifiers = ['ctrl', 'shift', 'alt', 'meta']
type KeyedEvent = KeyboardEvent | MouseEvent | TouchEvent type KeyedEvent = KeyboardEvent | MouseEvent | TouchEvent
@ -35,17 +37,17 @@ export const withModifiers = (fn: Function, modifiers: string[]) => {
const keyNames: Record<string, string | string[]> = { const keyNames: Record<string, string | string[]> = {
esc: 'escape', esc: 'escape',
space: ' ', space: ' ',
up: 'arrowup', up: 'arrow-up',
left: 'arrowleft', left: 'arrow-left',
right: 'arrowright', right: 'arrow-right',
down: 'arrowdown', down: 'arrow-down',
delete: 'backspace' delete: 'backspace'
} }
export const withKeys = (fn: Function, modifiers: string[]) => { export const withKeys = (fn: Function, modifiers: string[]) => {
return (event: KeyboardEvent) => { return (event: KeyboardEvent) => {
if (!('key' in event)) return if (!('key' in event)) return
const eventKey = event.key.toLowerCase() const eventKey = hyphenate(event.key)
if ( if (
// None of the provided key modifiers match the current event key // None of the provided key modifiers match the current event key
!modifiers.some(k => k === eventKey || keyNames[k] === eventKey) !modifiers.some(k => k === eventKey || keyNames[k] === eventKey)