# Diretiva personalizada
Suporta a versão
🆕 7.3+
As traduções podem ser feitas não apenas usando a diretiva v-t
personalizada, mas também usando o método $t
.
# Sintaxe de string
Você pode passar o keypath de mensagens da localização como uma string.
JavaScript:
new Vue({
i18n: new VueI18n({
locale: 'en',
messages: {
en: { hello: 'Hi there!' },
pt: { hello: 'Olá!' }
}
}),
data: { path: 'hello' }
}).$mount('#string-syntax')
Template:
<div id="string-syntax">
<!-- string literal -->
<p v-t="'hello'"></p>
<!-- ligação do keypath por meio dos dados -->
<p v-t="path"></p>
</div>
O resultado será o seguinte:
<div id="string-syntax">
<p>Olá!</p>
<p>Olá!</p>
</div>
# Sintaxe do objeto
Você pode usar a sintaxe do objeto.
JavaScript:
new Vue({
i18n: new VueI18n({
locale: 'en',
messages: {
en: { hello: 'Hi {name}!' },
pt: { hello: 'Olá {name}!' }
}
}),
computed: {
nickName() { return 'kazupon' }
},
data: { path: 'hello' }
}).$mount('#object-syntax')
Template:
<div id="object-syntax">
<!-- literal -->
<p v-t="{ path: 'hello', locale: 'pt', args: { name: 'kazupon' } }"></p>
<!-- ligação do keypath por meio dos dados -->
<p v-t="{ path: path, args: { name: nickName } }"></p>
</div>
O resultado será o seguinte:
<div id="object-syntax">
<p>Olá kazupon!</p>
<p>Hi kazupon!</p>
</div>
# Use com transições
Suporta a versão
🆕 8.7+
Ao usar a diretiva v-t
em um elemento dentro do componente <transition>
(opens new window), você pode ver como a mensagem traduzida desaparece durante a animação de transição. Este comportamento é devido à implementação do próprio componente <transition>
- todas as diretivas no elemento que desaparece dentro do componente <transition>
devem ser destruídas antes do início da transição. Esse comportamento pode resultar em oscilação do conteúdo em animações curtas, mas é mais perceptível em animações de transição longa.
Para preservar o conteúdo de uma diretiva durante uma animação de transição, você precisa adicionar modificador .preserve
ao definir a diretiva v-t
.
Javascript:
new Vue({
i18n: new VueI18n({
locale: 'pt',
messages: {
pt: { preserve: 'com preservação' }
}
}),
data: { toggle: true }
}).$mount('#in-transitions')
Template:
<div id="in-transitions">
<transition name="fade">
<span v-if="toggle" v-t.preserve="'preserve'"></span>
</transition>
<button @click="toggle = !toggle">Toggle</button>
</div>
Também é possível definir globalmente a configuração preserveDirectiveContent
na instância VueI18n
, o que afetará todas as diretivas v-t
sem adicionar um modificador.
JavaScript:
new Vue({
i18n: new VueI18n({
locale: 'pt',
messages: {
pt: { preserve: 'com preservação' }
},
preserveDirectiveContent: true
}),
data: { toggle: true }
}).$mount('#in-transitions')
Template:
<div id="in-transitions">
<transition name="fade">
<span v-if="toggle" v-t="'preserve'"></span>
</transition>
<button @click="toggle = !toggle">Toggle</button>
</div>
Você pode aprender mais sobre os exemplos acima [aqui] (https://github.com/kazupon/vue-i18n/tree/dev/examples/directive)
# $t
ou v-t
# $t
$t
é um método adicionado à instância Vue. Tem os seguintes prós e contras:
# Prós
Você pode flexivelmente usar a sintaxe de chaves {{}}
em templates e também props e métodos computados na instância Vue.
# Contras
$t
é executado toda vez quando ocorre uma nova renderização, então tem a sobrecarga de fazer a tradução.
# v-t
v-t
é uma diretiva personalizada. Tem os seguintes prós e contras:
# Prós
v-t
tem melhor desempenho do que o método $t
devido ao seu cache com a diretiva personalizada, quando traduzido uma vez. Além disso, a pré-tradução é possível com o módulo do compilador Vue que foi fornecido por vue-i18n-extensions
(opens new window).
Portanto, é possível fazer mais otimizações de desempenho.
# Contras
v-t
não pode ser usado de forma tão flexível como $t
, e isso adiciona complexidade. A tradução com v-t
é inserida no textContent
do elemento. Além disso, ao usar a renderização do lado do servidor, você precisa definir a diretiva personalizada (opens new window) por meio da opção directives
da função createRenderer
.