Vue 实现loading进度条

项目中遇到的，用vue实现下：

 <template>
   <div class="plLoading">
     <div class="plLoadingContent">
       <div class="plLoadingLogo">
         <img src="http://static.crecgec.com/Kaipiao/loadingLogo.png"/>
       </div>
       <div class="plLoadingCon">
         <div class="plLoadingShow" ref="plLoadingShow" :style="{width: plsStyleWidth}"></div>
         <div class="plLoCir" ref="plLoCir" :style="{left: plcStyleLeft}" v-show="plcShow"></div>
       </div>
       <div class="plLoadingNum" ref="plLoadingNum">%</div>
     </div>
     <!--测试用的，使用的时候，在父组件创建一个隐藏的Ddiv，里面放入这个页面用到的所有img-->
     <div class="imgsHidden displayNone">
       <img class="hImg" src="http://static.crecgec.com/Kaipiao/countDownTitle.png">
       <img class="hImg" src="http://static.crecgec.com/Kaipiao/countDown.png">
       <img class="hImg" src="http://static.crecgec.com/Kaipiao/countDown1.png">
       <img class="bImg" src="http://static.crecgec.com/Kaipiao/background.png">
       <img class="hImg" src="http://static.crecgec.com/Kaipiao/loadingLogo.png">
     </div>
   </div>
 </template>

 <script type="text/ecmascript-6">
   import $ from 'jquery'

   export default {
     props: {
       eleH: {
         type: String,
         default: 'hImg'
       },
       eleB: {
         type: String,
         default: 'bImg'
       },
       dataIsOk: {
         type: Boolean,
         default: false
       }
     },
     data () {
       return {
         plsStyleWidth: , // plLoadingShow的初始width
         plcStyleLeft: , // plLoCir的初始left值
         plcShow: true, // plLoCir初始是显示状态
         backImgLoading: false, // 背景图片是否加载成功(40)
         otherImgLoading: false, // 头部、底部图片加载成功(40)
         dataLoading: '', // 后台返回的数据加载成功(20)
         lodingWidth: ,
         otherImgLength: ,
         otherNum: ,
         backImgLength: ,
         backNum:
       }
     },
     watch: {
       // 整个也没被分为三部分：背景图、其他图片、数据
       // 监控otherImgLoading，（其他图片加载成功），this.lodingWidth增加40
       otherImgLoading () {
         this.lodingWidth = this.lodingWidth +
       },
       // 监控otherImgLoading，（背景图片加载成功），this.lodingWidth增加40
       backImgLoading () {
         this.lodingWidth = this.lodingWidth +
       },
       // 监控dataIsOk，（数据加载成功，这个有父组件传递过来），this.lodingWidth增加20
       dataIsOk () {
         if (this.dataIsOk) {
           this.lodingWidth = this.lodingWidth +
         }
       },
       // 监控lodingWidth的值
       lodingWidth () {
         if (this.lodingWidth <= ) {
           this.setLoadingWidthTimer(this.lodingWidth)
         }
       },
       // 监控plcStyleLeft（圆球的left值），如果值为484px（自己设置的），表明圆球到了最右边
       // 圆球隐藏
       plcStyleLeft () {
         if (this.plcStyleLeft === '484px') {
           setTimeout(() => {
             this.plcShow = false
             this.hasScroll()
             this.$emit('tipShow', {loadingIsShow: false})
           }, )
         }
       }
     },
     mounted () {
       this.isOtherImgLoading(this.eleH)
       this.isBackImgLoading(this.eleB)
       this.noScroll()
     },
     methods: {
       // 设置width、left
       setLoadingWidthTimer (newPllsWidth) {
         if (newPllsWidth <= ) {
           setTimeout(() => {
             this.plsStyleWidth = ( * newPllsWidth / ) + 'px'
             this.plcStyleLeft = ( * newPllsWidth / ) + 'px'
             this.$refs.plLoadingNum.innerHTML = newPllsWidth + '%'
           }, )
         } else if (newPllsWidth <= ) {
           setTimeout(() => {
             this.plsStyleWidth = ( * newPllsWidth / ) + 'px'
             this.plcStyleLeft = ( * newPllsWidth / ) + 'px'
             this.$refs.plLoadingNum.innerHTML = newPllsWidth + '%'
           }, )
         } else {
           setTimeout(() => {
             this.plsStyleWidth = ( * newPllsWidth / ) + 'px'
             this.plcStyleLeft = ( * newPllsWidth / ) + 'px'
             this.$refs.plLoadingNum.innerHTML = newPllsWidth + '%'
           }, )
         }
       },
       // 弹出层显示的时候，没有滚动条
       noScroll () {
         document.body.style.cssText = 'overflow:hidden;'
       },
       // 弹出层消失后，滚动条显示
       hasScroll () {
         document.body.style.cssText = 'overflow:auto;'
       },
       isOtherImgLoading (ele) {
         this.otherImgLength = $('.' + ele).length
         let _this = this
         if (this.otherImgLength > ) {
           $('.' + ele).each(function () {
             $(this).on('load', function () {
               _this.otherNum = _this.otherNum +
               if (_this.otherImgLength === _this.otherNum) {
                 _this.otherImgLoading = true
               }
             })
           })
         } else {
           this.otherImgLoading = true
         }
       },
       isBackImgLoading (ele) {
         this.backImgLength = $('.' + ele).length
         let _this = this
         if (this.backImgLength > ) {
           $('.' + ele).each(function () {
             $(this).on('load', function () {
               _this.backNum = _this.backNum +
               if (_this.backImgLength === _this.backNum) {
                 _this.backImgLoading = true
               }
             })
           })
         } else {
           this.backImgLoading = true
         }
       }
     }
   }
 </script>

 <style>
   .plLoading{
     width: %;
     height: %;
     position: absolute;
     left: ;
     top: ;
     z-index: ;
     background-color: #00101d;
   }
   .plLoadingContent{
     width: 500px;
     height: 220px;
     position: absolute;
     margin:  auto;
     top: %;
     left: %;
     margin-top: -110px;
     margin-left: -250px;
   }
   .plLoadingLogo{
     height: 60px;
   }
   .plLoadingCon{
     width: 500px;
     height: 16px;
     margin-top: 100px;
     border-radius: 8px;
     background-color: #;
   }
   .plLoadingShow{
     transition: width .5s;
     height: 16px;
     border-radius: 8px;
     background-color: #0062b2;
     position: absolute;
   }
   .plLoCir{
     transition: left .5s;
     position: absolute;
     width: 16px;
     height: 16px;
     border-radius: 8px;
     background-color: #0062b2;
     box-shadow:   20px #008cff;
   }
   .plLoadingNum{
     font-size: 14px;
     color: #0062b2;
     margin-top: 20px;
   }
   .displayNone{
     display: none;
   }
 </style>