Vue 项目中使用 Loading 组件

编程语言 2019-02-28 17:49:49 阅读次数: 0
版权声明：版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_36157085/article/details/88020910

当在Vue项目，当向后台请求接口时，常常会使用 loding 过渡数据的加载时间。 
如果 loading 作为一个全局的加载状态，应该写在项目中的App.vue中

App.vue

//App.vue
<template>
    <div>
        //other code...
        <loading v-if='LOADING'/> //自己封装的loading 组件
    </div>
</template>

该 组件通过 Loading的状态显示隐藏。我们希望在请求某个接口的时候，将 Loading改为true，当接口请求后改为false，这样就能实现loading的过渡效果了。通过使用 vuex来修改Loading的状态

1.在App.vue的同层目录下新建一个 store.js 文件.

store.js

// store.js
const store = new Vuex.Store({
    state: {
        Loading: false
    },
    mutations: {
        showLoading(state){
            state.LOADING = true    
        },
        hideLoading (state) {
            state.LOADING = false
        }
    }
})

 2.在 main.js 中引入 store.js,并挂载到 Vue 实列上

main.js

//main.js
import store from './store'

new Vue({
    el: '#app',
    store,
    template: '<App/>',
    components: { App }
})

3.在请求中改变 Loading 状态

method() {
    this.$store.commit("showLoading");
    this.$axios({
      method: "get",
      url: "http://127.0.0.1:3000/..."
    })
      .then(result => {
        this.$store.commit("hideLoading");
      })
      .catch(err => {
          this.$store.commit("hideLoading");
          console.log(err);
      });
  }

4.监听 LOADING 状态

Vuex 中 state是动态更新的，也就是不管在任何地方对某一个 state的值做了修改，那么依赖该数据的 DOM 也将会发生改变。修改 App.vue 文件，监听 Loading 的值的变化。

App.vue

//App.vue
<template>
    <div id="app">
        <router-view></router-view>
        <loading v-if='Loading'/>
    </div>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        computed:{
            ...mapState([
                'Loading'
            ])
        },
        name: 'App'
    }
</script>

简单的 loading 组件。

效果图：

参考文章

 loading.vue

<template>
<div id="body">
<div class='loader'>
    <div class='loader_overlay'></div>
    <div class='loader_cogs'>
        <div class='loader_cogs__top'>
        <div class='top_part'></div>
        <div class='top_part'></div>
        <div class='top_part'></div>
        <div class='top_hole'></div>
        </div>
        <div class='loader_cogs__left'>
        <div class='left_part'></div>
        <div class='left_part'></div>
        <div class='left_part'></div>
        <div class='left_hole'></div>
        </div>
        <div class='loader_cogs__bottom'>
        <div class='bottom_part'></div>
        <div class='bottom_part'></div>
        <div class='bottom_part'></div>
        <div class='bottom_hole'></div>
        </div>
        <p>loading</p>
  </div>
</div>
</div>
</template>

<script>
export default {
  name: 'loading'
}
</script>

<style scoped>
#body {
  height: 100vh;
  font-family: "微软雅黑";
  text-align: center;
  overflow: hidden;
}
h1 {
  text-transform: uppercase;
  font-size: 30px;
  color: #576e81;
  margin: 30px 0px 0px 0px;
}
h2 {
  font-weight: normal;
  font-size: 18px;
  color: #f98db9;
  margin: 10px 0px 0px 0px;
}
p {
  margin: 0 auto;
}
.loader {
  height: 250px;
  position: relative;
  margin: 220px auto;
  width: 400px;
  z-index: 10;
}
.loader_overlay {
  width: 150px;
  height: 150px;
  background: transparent;
  box-shadow: 0px 0px 0px 1000px rgba(255, 255, 255, 0.67),
    0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset;
  border-radius: 100%;
  z-index: -1;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.loader_cogs {
  z-index: -2;
  width: 100px;
  height: 100px;
  top: -120px !important;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.loader_cogs__top {
  position: relative;
  width: 100px;
  height: 100px;
  -webkit-transform-origin: 50px 50px;
  transform-origin: 50px 50px;
  -webkit-animation: rotate 10s infinite linear;
  animation: rotate 10s infinite linear;
}
.loader_cogs__top div:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.loader_cogs__top div:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
.loader_cogs__top div:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.loader_cogs__top div.top_part {
  width: 100px;
  border-radius: 10px;
  position: absolute;
  height: 100px;
  background: #f98db9;
}
.loader_cogs__top div.top_hole {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: white;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.loader_cogs__left {
  position: relative;
  width: 80px;
  -webkit-transform: rotate(16deg);
  transform: rotate(16deg);
  top: 28px;
  -webkit-transform-origin: 40px 40px;
  transform-origin: 40px 40px;
  -webkit-animation: rotate_left 10s 0.1s infinite reverse linear;
  animation: rotate_left 10s 0.1s infinite reverse linear;
  left: -24px;
  height: 80px;
}
.loader_cogs__left div:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.loader_cogs__left div:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
.loader_cogs__left div:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.loader_cogs__left div.left_part {
  width: 80px;
  border-radius: 6px;
  position: absolute;
  height: 80px;
  background: #97ddff;
}
.loader_cogs__left div.left_hole {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: white;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
.loader_cogs__bottom {
  position: relative;
  width: 60px;
  top: -65px;
  -webkit-transform-origin: 30px 30px;
  transform-origin: 30px 30px;
  -webkit-animation: rotate_left 10.2s 0.4s infinite linear;
  animation: rotate_left 10.2s 0.4s infinite linear;
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
  left: 79px;
  height: 60px;
}
.loader_cogs__bottom div:nth-of-type(1) {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}
.loader_cogs__bottom div:nth-of-type(2) {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}
.loader_cogs__bottom div:nth-of-type(3) {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.loader_cogs__bottom div.bottom_part {
  width: 60px;
  border-radius: 5px;
  position: absolute;
  height: 60px;
  background: #ffcd66;
}
.loader_cogs__bottom div.bottom_hole {
  width: 30px;
  height: 30px;
  border-radius: 100%;
  background: white;
  position: absolute;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* Animations */
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate_left {
  from {
    -webkit-transform: rotate(16deg);
    transform: rotate(16deg);
  }
  to {
    -webkit-transform: rotate(376deg);
    transform: rotate(376deg);
  }
}
@keyframes rotate_left {
  from {
    -webkit-transform: rotate(16deg);
    transform: rotate(16deg);
  }
  to {
    -webkit-transform: rotate(376deg);
    transform: rotate(376deg);
  }
}
@-webkit-keyframes rotate_right {
  from {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  to {
    -webkit-transform: rotate(364deg);
    transform: rotate(364deg);
  }
}
@keyframes rotate_right {
  from {
    -webkit-transform: rotate(4deg);
    transform: rotate(4deg);
  }
  to {
    -webkit-transform: rotate(364deg);
    transform: rotate(364deg);
  }
}
</style>

猜你喜欢

转载自blog.csdn.net/qq_36157085/article/details/88020910
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
周排行
Metasploit文件目录与入侵基本概念
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
CodeIgniter 源码解读之 CodeIgniter.php（二）
SAS入门之（四）改变数据类型
初识元组
[数学建模]数学建模算法和模型（B站视频）（二）
Nginx 服务器源码安装配置流程
C#实现语音视频录制 【基于MCapture + MFile】
开发进度4
下载安装vue的方法网址
每日归档
更多
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022