Vue 关于Loading组件的用法心得 记录一下

Vue 关于Loading组件的用法心得 记录一下

1.首先需要install一下VUEX，下为VUEX的写法

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
 
export default new Vuex.Store({
  state:{
    LOADING: false   
  },
  mutations:{
    showLoading(state){
      state.LOADING = true    
  },
    hideLoading (state){
      state.LOADING = false
  }
  },
  getters: {},
  actions: {}
})

2. 再弄一个Loading组件 这里贴一个
3. 这里面的CSS需要install一下 node-sass 才能呈现出效果

<template>
<div class="spinner">
     <div class="rect1"></div>
     <div class="rect2"></div>
     <div class="rect3"></div>
     <div class="rect4"></div>
     <div class="rect5"></div>
 </div>
</template>
<script>
export default {
    name: 'loading',
    data() {
        return {}
    }
}
</script>
<style scoped lang="scss">
.spinner {
  margin: 100px auto;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}
 
.spinner > div {
//   background-color: #67CF22;
background-color: #009688;
  height: 100%;
  width: 6px;
  display: inline-block;
   
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
 
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
  20% { -webkit-transform: scaleY(1.0) }
}
 
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
</style>

4.如果上面两个都搞定了 接下来 打开 main.js
写入以下两段代码 意思就是 引入上面那两个部分并使用它们

import store from './store/store'
import loading from './components/loading/loading.vue'

Vue.use(loading)
Vue.use(Vuex)

new Vue({
  el: '#app',
  store,     // 记得写上
  router,
  components: { App },
  template: '<App/>'
})

5.最后 找个文件引入就可以了

<template>
<div>
  <loading v-if='LOADING'></loading>  //引入的位置
  </div>
</template>

<script>
import loading from '../loading/loading.vue'  
import { mapState } from "vuex";
export default {
  name: "toot",
   computed: {  
    ...mapState(["LOADING"])
  },
    components:{     
         loading,
  }
  data() {
    return {}
  },
  methods: {
     getURL: function() {
       this.$store.commit('showLoading')  
    
       this.$store.commit('hideLoading')
      })
    }
  },
   Created(){
    this.getURL();   //创建后立刻调用上面那个方法
   },
};
</script>

小白一枚 研究许久 有感而发 如有不足 望其指出 有些地方参考了其他人的 如有雷同 纯属巧合
谢谢大家