Vue.js

# Modificadores KeyCode
breaking

# Visão Geral

Aqui está um resumo rápido do que mudou:

  • BREAKING: Usando números, i.e. keyCodes, como em modificadores v-on não é mais suportado
  • BREAKING: config.keyCodes não é mais suportado

# Sintaxe v2.x

No Vue 2, keyCodes eram suportados como uma maneira de modificar um método v-on.

<!-- versão usando keyCode -->
<input v-on:keyup.13="submit" />

<!-- versão usando apelido -->
<input v-on:keyup.enter="submit" />
1
2
3
4
5

Adicionalmente, você podia definir seus próprios apelidos através da configuração global config.keyCodes.

Vue.config.keyCodes = {
  f1: 112
}
1
2
3
<!-- versão usando keyCode -->
<input v-on:keyup.112="showHelpText" />

<!-- versão usando apelido customizado -->
<input v-on:keyup.f1="showHelpText" />
1
2
3
4
5

# Sintaxe v3.x

Uma vez que KeyboardEvent.keyCode virou obsoleto (opens new window), não faria mais sentido para o Vue 3 continuar à suportá-lo também. Como resultado, agora é recomendado utilizar o nome em kebab-case para qualquer tecla que você utilizar como um modificador.

<!-- Modificador de tecla do Vue 3 no v-on -->
<input v-on:keyup.delete="confirmDelete" />

<!-- Corresponde ambos q e Q -->
<input v-on:keypress.q="quit">
1
2
3
4
5

Como um resultado, isso significa que config.keyCodes também está obsoleto e não será mais suportado.

# Estratégia de Migração

Para aqueles que utilizam keyCode em sua base de código, nós recomendamos convertê-los para os nomes kebab-cased equivalentes.

As teclas para alguns sinais de pontuação podem ser incluídas literalmente. por exemplo. Para a tecla ,:

<input v-on:keypress.,="commaPress">
1

As limitações da sintaxe impedem que certos caracteres sejam correspondidos, como ", ', /, =, > e .. Para esses caracteres você deve verificar event.key dentro do escutador em vez disso.

Sinalizadores na compilação de migração:

  • CONFIG_KEY_CODES
  • V_ON_KEYCODE_MODIFIER

← $listeners removido →