2

Eu uso um código em jQuery pra fazer uma animação de carregamento da página, como faço o mesmo com VueJs?

(function ($) {
      "use strict";
      (function ($) {
        "use strict";
        var uza_window = $(window);
        uza_window.on("load", function () {
          $("#preloader").fadeOut("1000", function () {
            $(this).remove();
          });
        });
      })(jQuery);
    })(jQuery);
8

1 Resposta 1

2

Você pode utilizar os estados do ciclo de vida da instância vue para manter um componetente do loading visível como no exemplo abaixo.

Quando sua página for carregada ela irá invocar o método mounted, nele você pode definir que o componente loading pode ser escondido.

Vue.component("loading", {
  template: "<div v-if=\"isLoading\">Carregando...</div>",
  props: ["isLoading"],
})

Vue.component("my-page", {
  template: `
    <div>
      <loading :is-loading="!loaded"/>
      <div v-if="loaded">
      Olá mundo!
      </div>
    </div>
  `,
  data() {
    return {
      loaded: false
    }
  },
  mounted() {
    let self = this
    setTimeout(function() {
      self.loaded = true
    }, 3000)
  }
})


new Vue({
  el: "#app"
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <my-page/>
</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .