Vue - Loading 齿轮组件

左手的ㄟ右手 2022-03-16 16:46 191阅读 0赞

当在[V][]ue项目，当向后台请求接口时，常常会使用 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 组件。** ##

***效果图：***

![20190228121716693.png][]

--------------------

[参考文章][Link 1]

--------------------

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

[V]: https://www.baidu.com/s?wd=vue&tn=24004469_oem_dg&rsv_dl=gh_pl_sl_csd
[20190228121716693.png]: /images/20220316/59f92b52a6ef4c9eb3cf6f6f873da030.png
[Link 1]: https://blog.csdn.net/starleejay/article/details/80738296