vue写的加载器

loading的组件有这些要求：

1. 可以自定义loading的图片，图片大小
2. 可以自定义提示的字体，字体大小，颜色
3. 可以自定义loading出现的位置
4. 需要满足可以整个屏幕遮罩，也可以只在某个区块显示

<!--suppress ALL -->
<template>
  <div v-show="state2 != 0">
  <div v-bind:class="{popContainer:pop2}" v-if="state2 == 1">
    <div :class="{loadingContent:!pop2,loadingContent2:pop2}" >
      <img :src=imageUrl :style='pictureStyle2'/>
      <div class="letter_space" :style=fontStyle2>{{titleChange}}</div>
    </div>
  </div>
  <h1 class="no_data" v-if="state2 == 2">暂无数据</h1>
  <div class="loadingContent" v-if="state2 == 3">
     <div class="load_fail;">加载失败！请联系管理员</div>
  </div>
  </div>
</template>
<script>
  export default {
      /*可选项（title 二选一） imageUrl 是图片路径  数据格式 :imageUrl= '/img/图片名'*/
      /*可选项 pictureStyle 是图片设计格式  数据格式 :pictureStyle='{with:20px,height:20px,........等等}} '*/
      /*可选项 (imageUrl  二选一）title 是加载标题 数据格式 :title='正在加载。。。。'*/
      /*可选项 animal 是标题动画 数据格式 :animal=true  默认是false 不开启*/
      /*可选项 fontStyle 是标题样式设置，:fontStyle={color:red,fontSize:20px,.......等等}*/
      /*可选项 pop 是加载组件的遮罩模式，数据格式 :pop = true 默认false 不开启*/
      /*必填项 state 是加载组件的状态，数据格式 :state = 0,1,2,3 有四种状态，0是加载成功 1是正在加载 2是无数据 3是请求出错 */
      props: ['imageUrl', 'pictureStyle', 'title', 'animal', 'fontStyle', 'pop', 'state'],
      name: 'Loading',
      data() {
          return {
              /* imageUrl1: '/img/loading.gif',*/
              pictureStyle1: {with: '50px', height: '50px'},
              /*title1: '正在加载....',*/
              fontStyle1: {color: '#fff', fontSize: '15px'},
              fontStyle3:{color: '#000', fontSize: '15px'},
              pop1:false,
              animal1:false,
              titleChange:null
          }
      },
      mounted() {
          this.titleChange = this.title
          this.lang();
      },
      methods: {
          lang: function () {
              var _this = this;
              if (_this.titleChange != null && _this.animal2) {
                  _this.interval = setInterval(function () {
                      //获取第一个字符
                      var start = _this.titleChange.substring(0, 1);
                      //得到后面的字符
                      var end = _this.titleChange.substring(1);
                      //重新赋值
                      _this.titleChange = end + start;
                  }, 100)
              }
          }
      },
      computed: {
          /*通过接受父组件的请求状态，显示不同的样式*/
          state2() {
              if (this.state != null) {
                  return this.state
              } else {
                  return 0
              }
          },
          /*默认组件的数据格式*/
          fontStyle2(){
              if (this.fontStyle != null) {
                  return this.fontStyle
              } else if(this.pop) {
                  return this.fontStyle1
              }else{
                  return this.fontStyle3
              }
          },
          /*默认组件的数据格式*/
          pictureStyle2() {
              if (this.pictureStyle != null) {
                  return this.pictureStyle
              } else {
                  return this.pictureStyle1
              }
          },
          /*默认组件的数据格式*/
          pop2() {
              if (this.pop != null) {
                  return this.pop
              } else {
                  return this.pop1
              }
          },
          /*默认组件的数据格式*/
          animal2() {
              if (this.animal != null) {
                  return this.animal
              } else {
                  return this.animal1
              }
          }
      }
  }
</script>

<style scoped>
  .loadingContent{
    display: block;
    vertical-align: middle;
    text-align: center;
    font-family: 微软雅黑;
  }
  .loadingContent2{
    display: block;
    position: fixed;
    top: 45%;
    left: 0;
    right: 0;
    bottom: 0;
    vertical-align: middle;
    text-align: center;
    z-index: 99999;
  }
  /*遮罩*/
  .popContainer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 99999;
  }
  .no_data{
    text-align: center;
    margin-top: 20px;
    font-size: 30px
  }
  .load_fail{
    text-align: center;
    margin-top: 20px;
    font-size: 20px;
    color:red;
    margin-bottom: 20px
  }
  .cxjzb{
    padding:5px 10px 5px 10px;
    font-size: 15px;
  }
  .letter_space{
    letter-spacing: 3px;
  }
</style>