[游戏开发]Vue自定义Loading动画，自定义全局JS组件Loading动画【记录】

创建 Loading 目录

loading.vue 代码：

<template>
  <div class="cus-loading" v-if="flag" @click="stopPropagation" @touchstart="stopPropagation" @touchmove="stopPropagation">
    <div class="cus-loading-cont">
      <div class="cus-loading-cont-icon" v-show="iconFlag">
        <div class="cus-loading-cont-icon-spinner">
          <div class="cus-loading-cont-icon-rect1 rect"></div>
          <div class="cus-loading-cont-icon-rect2 rect"></div>
          <div class="cus-loading-cont-icon-rect3 rect"></div>
          <div class="cus-loading-cont-icon-rect4 rect"></div>
          <div class="cus-loading-cont-icon-rect5 rect"></div>
        </div>
      </div>
      <div class="cus-loading-cont-txt" v-if="txtFlag">{{title}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      flag: false,
      iconFlag: true,
      txtFlag: true,
      title: ''
    }
  },
  props: {

  },
  methods: {
    open(){
      this.flag = true
    },
    close(){
      this.flag = false
    },
    stopPropagation(e){
      e.stopPropagation()
      e.preventDefault()
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.cus-loading{
  width: 100%;
  height: 100%;
  position: fixed;
  top:0;
  left:0;
  background: rgba(0,0,0,0.75);
  z-index: 99;
  .cus-loading-cont{
    width: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .cus-loading-cont-icon{
      margin-bottom: 24px;
      .cus-loading-cont-icon-spinner{
        margin: 0 auto;
        width: 120px;
        height: 60px;
        text-align: center;
        font-size: 10px;
        .rect{
          background-color: #F09C22;
          height: 100%;
          width: 6px;
          display: inline-block;

          -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
          animation: stretchdelay 1.2s infinite ease-in-out;

          &.cus-loading-cont-icon-rect1{
          }
          &.cus-loading-cont-icon-rect2{
            -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
          }
          &.cus-loading-cont-icon-rect3{
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
          }
          &.cus-loading-cont-icon-rect4{
            -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
          }
          &.cus-loading-cont-icon-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);
          }
        }
      }
    }
    .cus-loading-cont-txt{
      text-align: center;
      color: #FFFFFF;
      font-size: 28px;
      letter-spacing: 2px;
    }
  }
}
</style>

index.js 代码

import Vue from 'vue'
import CusLoading from './loading.vue'

const Loading = Vue.extend(CusLoading)

CusLoading.install = function(options) {
    // console.log('options', options)
        /**
         * options的其他情况自行判断添加默认值等等
         */
    let str = '伦家正在努力的整理数据哦 (〃▽〃)'
    if (options === undefined || options === null) {
        options = {
            flag: true,
            iconFlag: true,
            txtFlag: true,
            title: str
        }
    } else if (typeof options === 'string') {
        options = {
            flag: true,
            iconFlag: true,
            txtFlag: true,
            title: options
        }
    } else {
        options = {
            flag: options.flag !== undefined ? options.flag : true,
            iconFlag: options.iconFlag !== undefined ? options.iconFlag : true,
            txtFlag: options.txtFlag !== undefined ? options.txtFlag : true,
            title: options.title !== undefined ? options.title : str
        }
    }

    let instance = new Loading({
        data: options
    }).$mount()

    document.body.appendChild(instance.$el)
    return instance // 返回当前实例
}

export default CusLoading

全局挂载：main.js

//自定义全局Loading组件
import CusLoading from './components/Loading'
Vue.prototype.$CusLoading = CusLoading.install;

使用：
注意：使用的时候就不需要引用了，因为在 main.js 里边已经挂载全局了，直接在 JS 里调用就行

// 直接默认值
let loading = this.$CusLoading()
setTimeout(() => {
	loading.close()
}, 1500)
// 手动打开 loading
let loading1 = this.$CusLoading({flag: false})
loading1.open() // 手动开启
setTimeout(() => {
	loading1.close()
}, 1500)
// 修改参数
let loading2 = this.$CusLoading({
  flag: false, // 关闭状态 true 为开启，可调用当前实例的 open 方法手动打开
  iconFlag: false, // 隐藏动画
  txtFlag: true, // 加载文案状态，false 为不展示
  title: '加载中' // 自定义加载文案
})
loading2.open() // 手动开启
setTimeout(() => {
	loading2.close() // 手动关闭
}, 1500)