Comment implémenter le graphique de chargement de l'affichage des demandes de données dans vue2

Cet article présente principalement vue2 pour implémenter en détail le diagramme de chargement de l'affichage des demandes de données. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

Dans les projets généraux, cela est parfois nécessaire, vous affichez une image gif. pendant la demande de données, puis disparaissent une fois les données chargées. Pour cela, il vous suffit généralement d'écrire des événements js dans les axios encapsulés. Bien sûr, nous devons d'abord ajouter cette image à app.vue. Comme suit :

<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>

Le fetchLoading ici est une variable stockée dans vuex. La définition suivante est requise dans store/modules/common.js :

/* 此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
 }
}

Le composant de chargement est le suivant :

<template>
 <p class="loading">
 <img src="./../../assets/main/running.gif" 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>

Enfin, écrivez le jugement dans les axios encapsulés dans fetch /api.js L'événement de chargement suffit : comme suit

// axios的请求时间
let axiosDate = new Date()
export function fetch (url, params) {
 return new Promise((resolve, reject) => {
 axios.post(url, params)
 .then(response => {
 // 关闭 loading图片消失
 let oDate = new Date()
 let time = oDate.getTime() - axiosDate.getTime()
 if (time < 500) time = 500
 setTimeout(() => {
  store.dispatch(&#39;FETCH_LOADING&#39;, false)
 }, time)
 resolve(response.data)
 })
 .catch((error) => {
 // 关闭 loading图片消失
 store.dispatch(&#39;FETCH_LOADING&#39;, false)
 axiosDate = new Date()
 reject(error)
 })
 })
}
export default {
 // 组件中公共页面请求函数
 commonApi (url, params) {
 if(stringQuery(window.location.href)) {
 store.dispatch(&#39;FETCH_LOADING&#39;, true);
 }
 axiosDate = new Date();
 return fetch(url, params);
 }
}

Ceci est réalisé lorsque les données sont chargées dans le projet, l'image gif s'affiche et disparaît lorsque les données sont chargées.

Pour les didacticiels d'apprentissage de vue.js, veuillez cliquer sur les didacticiels spéciaux d'apprentissage des composants vue.js et les didacticiels d'apprentissage des composants frontaux Vue.js pour apprendre.

Pour plus de tutoriels d'apprentissage Vue, veuillez lire le sujet spécial "Tutoriel pratique Vue"

Ce qui précède est ce que j'ai compilé pour vous, j'espère qu'il vous sera utile à l'avenir.

Articles connexes :

Utiliser Angular5 pour implémenter le rendu côté serveur

Comment réinitialiser l'état d'inactivité dans vuex

Utilisez jQuery pour encapsuler animate.css (tutoriel détaillé)

fichier de configuration vue-cli (tutoriel détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!