Olá,
Muitos projetos utilizam ótima esta biblioteca chamada VEX para exibir alertas, confirms entre outros tipos de 'modals' para o usuário substituindo o tradicional comando alert("texto"); do navegador (que tem visual mais feinho xD).
Neste post quero mostrar como é possível customizar o texto de botões do vex.dialog.open e do vex.dialog.confirm, visto que muitos tem esta dificuldade. Quando você consulta a documentação você acha a seguinte instrução:
Então você pensa... ok vou fazer meu vex dialog e sobreescrever as propriedades do confirm ou open na construção do componente. Ficando mais ou menos assim:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
vex.dialog.confirm({
message: "Deseja confirmar?",
buttons: {
YES: {
text: 'Claro! Agora mesmo.',
className:'vex-dialog-button-primary vex-dialog-button vex-first',
},
NO: {
text: 'Ahhh, não quero...',
className:'vex-dialog-button-secondary vex-dialog-button vex-last',
}
},
callback: function (value) {
console.log(value)
}
});
|
O Resultado é que independente do botão clicado, dentro do callback você sempre recebe true... não podendo fazer uma lógica real com condição. A única forma de se receber false seria com click na camada overlay para fechar modal.
Para resolver realmente e implementar de uma maneira que funcione com segurança de true e false no callback você deve substituir os textos dos botões da seguinte maneira:
1 2 3 4 5 6 7 8 9 10 | vex.dialog.confirm({
message: "Deseja confirmar?",
buttons: buttons: [
$.extend({}, vex.dialog.buttons.YES, { text: 'Claro! Agora mesmo.' }),
$.extend({}, vex.dialog.buttons.NO, { text: 'Ahhh, não quero...' })
],
callback: function (value) {
console.log(value)
}
});
|
Por hoje é isso ;)
Até o próximo post...
Comentários
Postar um comentário