vue2에서 데이터 요청 표시 로딩 그래프를 구현하는 방법

이 글에서는 주로 데이터 요청 디스플레이 로딩 다이어그램을 구현하기 위해 vue2를 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

일반적인 프로젝트에서는 gif를 요청할 때 데이터 요청을 수행해야 하는 경우가 있습니다. 이미지를 삭제한 후 데이터가 로드된 후 사라집니다. 이를 위해서는 일반적으로 캡슐화된 axios에 js 이벤트만 작성하면 됩니다. 물론 먼저 이 이미지를 app.vue에 추가해야 합니다. 다음과 같습니다:

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

여기서 fetchLoading은 vuex에 저장된 변수입니다. 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
 }
}

로딩 구성 요소는 다음과 같습니다.

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

마지막으로 fetch/api.js에 캡슐화된 axios에 판단 로딩 이벤트를 작성합니다. 다음과 같습니다

// 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);
 }
}

그렇습니다. 프로젝트에 데이터가 로드되면 gif 이미지가 표시되었다가 데이터가 로드되면 사라집니다.

vue.js 학습 튜토리얼을 보려면 특수 vue.js 컴포넌트 학습 튜토리얼과 Vue.js 프론트엔드 컴포넌트 학습 튜토리얼을 클릭하여 학습하세요.

더 많은 Vue 학습 튜토리얼을 보려면 특별 주제 "Vue Practical Tutorial"을 읽어보세요.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

Angular5를 사용하여 서버 측 렌더링 구현 구현

vuex에서 유휴 상태 재설정을 구현하는 방법

jQuery를 사용하여 animate.css 캡슐화(자세한 튜토리얼)

vue- cli 구성 파일(자세한 튜토리얼)

위 내용은 vue2에서 데이터 요청 표시 로딩 그래프를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!