So implementieren Sie das Ladediagramm für die Datenanforderungsanzeige in vue2

In diesem Artikel wird hauptsächlich die Implementierung des Ladediagramms für Datenanforderungen im Detail vorgestellt. Interessierte Freunde können sich darauf beziehen.

In allgemeinen Projekten ist es manchmal erforderlich, ein GIF-Bild anzuzeigen während der Datenanforderung angezeigt und verschwinden nach dem Laden der Daten. Dazu müssen Sie in der Regel nur js-Ereignisse in die gekapselten Axios schreiben. Natürlich müssen wir dieses Bild zuerst zu app.vue hinzufügen. Wie folgt:

<template>
 <p id="app">
 <loading v-show="fetchLoading"></loading>
 <router-view></router-view>
 </p>
</template>

<script>
 import { mapGetters } from &#39;vuex&#39;;
 import Loading from &#39;./components/common/loading&#39;;

 export default {
 name: &#39;app&#39;,
 data() {
 return {
 }
 },
 computed: {
 ...mapGetters([
 &#39;fetchLoading&#39;,
 ]),
 },
 components: {
 Loading,
 }
 }
</script>

<style>
 #app{
 width: 100%;
 height: 100%;
 }
</style>

Der fetchLoading hier ist eine in vuex gespeicherte Variable. Die folgende Definition ist in store/modules/common.js erforderlich:

/* 此js文件用于存储公用的vuex状态 */
import api from './../../fetch/api'
import * as types from './../types.js'
const state = {
 // 请求数据时加载状态loading
 fetchLoading: false
}
const getters = {
 // 请求数据时加载状态
 fetchLoading: state => state.fetchLoading
}
const actions = {
 // 请求数据时状态loading
 FETCH_LOADING({
 commit
 }, res) {
 commit(types.FETCH_LOADING, res)
 },
}
const mutations = {
 // 请求数据时loading
 [types.FETCH_LOADING] (state, res) {
 state.fetchLoading = res
 }
}

Die Ladekomponente lautet wie folgt:

<template>
 <p class="loading">
 <img src="/static/imghwm/default1.png"  data-src="./../../assets/main/running.gif"  class="lazy"   alt="">
 </p>
</template>

<script>
 export default {
 name: &#39;loading&#39;,
 data () {
 return {}
 },
 }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 .loading{
 position: fixed;
 top:0;
 left:0;
 z-index:121;
 width: 100%;
 height: 100%;
 background: rgba(0,0,0,0.3);
 display: table-cell;
 vertical-align: middle;
 text-align: center;
 }
 .loading img{
 margin:5rem auto;
 }
</style>

Schreiben Sie abschließend das Urteilsladeereignis in die Axios, die in fetch/api gekapselt sind .js. : Wie folgt:

rrree

Dies wird erreicht, wenn die Daten in das Projekt geladen werden. Das GIF-Bild wird angezeigt und verschwindet, wenn die Daten geladen werden.

Für vue.js-Lerntutorials klicken Sie bitte auf die speziellen vue.js-Komponenten-Lerntutorials und Vue.js-Front-End-Komponenten-Lerntutorials, um zu lernen.

Weitere Vue-Lerntutorials finden Sie im speziellen Thema „Vue-Praxis-Tutorial“.

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Angular5 verwenden, um serverseitiges Rendering zu implementieren

So setzen Sie den Ruhezustand in vuex zurück

Verwenden Sie jQuery, um animate.css zu kapseln (ausführliches Tutorial)

vue-cli-Konfigurationsdatei (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Ladediagramm für die Datenanforderungsanzeige in vue2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!