<template>
    <transition :name="animateName">
        <div class="wrap" v-show="isShow">
            <div class="mask"></div>
            <div class="loading">
                <img src="../../examples/assets/loading.gif">
            </div>
        </div>
    </transition>
</template>
<script>
  export default {
    data () {
      return {
        isShow: false,
        hasAnimate: true
      }
    },
    computed: {
      /* *
         * 动画效果样式，没有返回空
         * @return {String} 样式
         */
      animateName () {
        return this.hasAnimate ? 'opacity' : ''
      }
    },
    methods: {
      /**
       * 开启动画效果
       */
      opemAnimate () {
        this.hasAnimate = true
      },
      /**
       * 去除动画效果
       * @return {Promise} 返回promise
       */
      removeAnimate () {
        return new Promise((resolve) => {
          this.hasAnimate = false
          resolve()
        })
      },
      /**
       * 显示动画loading
       */
      show () {
        this.isShow = true
      },
      /**
       * 隐藏动画loading
       */
      hide () {
        this.isShow = false
      }
    }
  }
</script>
<style scoped>
    .wrap{
        width:100%;
        height:100%;

    }
    .mask{
        position: fixed;
        top: 0;
        left: 0;
        width:100%;
        height:100%;
        z-index: 888;
    }
    .loading{
        width:100%;
        height:100%;
        z-index: 999;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items:center;
    }
    .loading>img{
        width:50px;
        height:50px;

    }
</style>
