Laravel e Vue.js

Vue.js no Laravel (conclusão)

Esta é a conclusão da série de três post de introdução ao Vue.js no Laravel nela abordei desde a instalação até a criação de um componente de janela modal.

Trata-se de uma série de posts para iniciantes e se você não acompanhou os outros posts seguem os links:
Vue.js no Laravel
Vue.js no Laravel (continuação)




Aprimorando o componente

Se você conseguiu chegar até aqui com o componente funcionando e exibindo uma janela semelhante a da figura acima, parabéns.

Caso contrário, não desanime, revise o código até que ele funcione, pois a partir daqui iremos aprimorar o componente, de forma que para prosseguir é imprescindível que este código já esteja funcionado.

Concluindo esta série de posts sobre Laravel e Vue vamos agora aprimorar o componente de janela modal para que ele fique semelhante ao da figura abaixo.

imagem-tela-modal-componente

Uma das melhorias que veremos será como definir atributos para o componente que neste caso serão as mensagens a ser exibidas no cabeçalho e no rodapé.

Desta forma o componente poderá ser reutilizado em vários locais de nosso website para exibir diversas mensagens diferentes sem a necessidade de alteração no código do componente.

Esta reutilização é uma das principais finalidades de criarmos componentes no Vue.js, dessa forma após a alteração o componente passará a ter atributos que poderão ser definidos no código HTML.

Alterando o template

Comecemos nossa alteração no template, para isto altere o código original de forma a que ele fique igual ao código abaixo:

<template>
    <div>
        <div id="myModal" class="modal-win">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>{{myHeader}}</h2>
                    <span class="close" @click="closeClick">×</span>
                </div>
                <div class="modal-body">
                    <p>
                        <slot>Coloque aqui o texto de sua Janela Modal.</slot>
                    </p>
                </div>
                <div class="modal-footer">
                    <h3>{{myFooter}}</h3>
                </div>
            </div>
        </div>
    </div>
</template>

Examinando as modificações no código, que estão nas linhas de 4 a 17 na listagem acima, vemos alguns elementos novos. O primeiro deles é o símbolo de interpolação, também chamado de Mustache ou bigode, e que consiste em chaves duplas {{ e }}.

Usando este símbolo no template faremos com que as expressões {{myHeader}} e {{myFooter}} sejam substituídas pelos respectivos valores das propriedades correspondentes.

No próximo tópico, onde alteraremos a seção script deste componente, veremos como definir estas propriedades.

Alterando o script

Prosseguindo, vamos agora fazer a alteração na seção script de nosso componente de acordo com a linha que está destacada no trecho de código abaixo.

....
destroyed: function() {
        window.removeEventListener('click', this.janelaClick);
    },
    props: [ 'myHeader', 'myFooter']
}

A única alteração foi a inclusão de uma linha para a definição das propriedades myHeader e myFooter. Note que para o nome das propriedades foi usada a convenção camelCase, um padrão no Java Script.

Porém fique atento para o fato de que ao referenciar estas propriedades no código HTML que utiliza o componente elas serão referenciadas pelos seguintes nomes: my-header e my-footer.

Esta conversão dos nomes é feita de forma automática pelo Vue.js e foi mostrada neste texto para que você saiba que ela existe, porém, seu uso não é obrigatório, sendo apenas uma convenção.

Caso queira você poderá dar às propriedades de seus componentes os mesmos nomes pelos quais serão referenciados no código HTML, neste caso a linha de código seria a seguinte:

props: [ 'my-header', 'my-footer']




Alterando o style

A última alteração no código antes de testarmos o componente dever ser feita na seção style conforme o trecho de código que está na listagem abaixo.

<style scoped>
/* Botao Fechar */
    .close:hover,
    .close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
    
    /* Cabecalho do Modal */
    .modal-header {
        padding: 2px 16px;
        background-color: #5cb85c;
        color: white;
    }

    /* Janela Modal (background) */
    .modal-body {padding: 2px 16px;}

    /* Rodape do Modal */
    .modal-footer {
        padding: 2px 16px;
        background-color: #5cb85c;
        color: white;
    }

    /* Conteudo da janela Modal */
    .modal-content {
        position: relative;
        background-color: #fefefe;
        margin: auto;
        padding: 0;
        border: 1px solid #888;
        width: 80%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        animation-name: animatetop;
        animation-duration: 0.4s
    }

    /* Definicoes de animacao */
    @keyframes animatetop {
        from {top: -300px; opacity: 0}
        to {top: 0; opacity: 1}
    }
</style>

Vamos comentar algumas partes do código acima, iniciando com a definição do botão fechar, o X no canto superior direito da janela modal.

Foram definidas a propriedade hover (3), que alterará a aparência do botão fechar quando o mouse passar sobre ele, e também o ponteiro do mouse (4) que agora será a seta.

Em seguida temos a estilização do cabeçalho, conteúdo e rodapé (11, 18 e 21) da janela modal. tendo sido definidos cores de fundo e de texto, bem como os paddings internos.

Finalmente vemos a definição e estilo para a classe modal-content (28) que será aplicada a uma div que envolverá o conteúdo (cabeçalho, conteúdo e rodapé) de nossa janela modal.

Assim sendo, as propriedades css que foram definidas aqui serão aplicadas à janela modal como um todo. Alguns exemplos são: a posição relativa, a largura de 80%, entre outras.

Duas dessas propriedades que vale mencionar são animation-name (36) e animation-duration (37). Ambas, como o nome denuncia, associadas com a animação da janela.

Para definir quanto tempo a animação levará para ser executada utilizamos a propriedade animation‑duration. Esta é uma propriedade obrigatória, pois se não for definida a animação não irá ocorrer.

Em animation-name informamos qual o nome da animação que será executada, em nosso código exemplo esta animação é  referenciadas pelo nome animatetop, que é definido pelo usuário.

Seu código se encontra um pouco mais abaixo e contém uma regra @keyframe que, em linhas gerais, faz a aplicação gradual nos estilos definidos, passando dos que estão em from para os definidos em to, em um intervalo de tempo predeterminado.

Assim, a propriedade top inicia com o valor de -300, o que a deixa fora da área visível no browser, e, gradativamente, seu valor vai sendo alterado até que chegue em top = 0, e o modal esteja totalmente visível.

Testando o novo modal

Para finalizar necessitamos agora fazer o teste de funcionamento e para isso vamos alterar o arquivo resources/views/vue-teste.blade.php e modificar o código original para que fique conforme o trecho abaixo:

<janela-modal my-header="A T E N Ç Ã O !!!" my-footer="SOMENTE ESTA SEMANA">P R O M O Ç Ã O ! !  Toda a loja com 50% de desconto e frete grátis.</janela-modal>

Note que, conforme mencionei, os atributos my-reader e my-footer são referenciados usando a notação padrão no HTML, a kebab-case, mas o Vue.js é capaz de realizar a conversão entre cases e interpretar estes atributos como as propriedades myHeader e myFooter.

Em seguida, para recompilar o componente, executar o comando:

npm run dev

Neste momento vale mencionar que é possível utilizar o npm no modo watch, executando o seguinte comando:

npm run watch

Ao executar esse comando qualquer alteração no código será recompilada automaticamente, porém o prompt ficará indisponível, de forma que para executar novos comandos será necessário abrir uma outra janela de linha de comando (prompt, shell ou terminal).

Agora recarregue a página no browser mais uma vez e caso tudo tenha corrido bem será exibida uma tela semelhante a ilustrada abaixo:

Agora o componente está pronto e você pode utilizar o mesmo em várias páginas de seu aplicativo web usando outros cabeçalhos, rodapés e contéudo, bastando para isto definir as respectivas propriedades no seu código HTML sem necessidade de alteração no componente.

Para aprender mais

Agora é com você, tente alterar o código para exibir mensagens diferente e para, por exemplo, fazer com que a animação seja mais demorada, ou para que a janela surja do lado direito da tela.

Para te auxiliar seguem abaixo alguns links de referência com alguns dos assuntos que foram mencionados neste post:

https://vuejs.org/v2/api/#props

https://br.vuejs.org/v2/guide/components-props.html

https://www.w3schools.com/js/js_conventions.asp

Conheça também outros posts que escrevi a respeito do Laravel:
eBook chatbot usando Laravel Botman e Dialogflow
Como instalar a máquina virtual Laravel Homestead

Se desejar deixe um feedback a respeito do post. Até mais!