// progress-bar.vue<template> <transition name="fade"> <div class="progress-bar" v-if="isShow"> </div> </transition></template><script type="text/babel"> export default { data() {  return {  isShow: true, // 是否顯示進度條  val: 0, // 進度  } }, props: {  /**  * 每10毫秒自增幅度  */  step: {  type: Number,  default: 5,  },  /**  * 初始值  */  initVal: {  type: Number,  default: 0,  },  /**  * 到一定進度停止  */  stopVal: {  type: Number,  default: 80,  },  /**  * 進度條繼續到成功  */  isOk: {  type: Boolean,  default: false,  }, }, mounted() {  // 初始化后加載進度，加載到百分之多少由stopVal決定  this.val = this.initVal  let step = this.step  let timer = setInterval(() => {  this.val = this.val + step  this.$el.style.width = this.val + '%'  // 父組件數據加載完前進度條最多到stopVal的這個百分值  if (this.val >= this.stopVal) {   clearInterval(timer)   return  }  }, 10) }, watch: {  /**  * 監聽組件props變化決定是否繼續加載，一般在父組件數據加載完后改變此標志位  */  isOk() {  let val = this.val  let step = this.step  let timer = setInterval(() => {   val = val + step   this.$el.style.width = val + '%'   // 加載到百分百完成   if (val >= 100) {   // 關閉定時器   clearInterval(timer)   // 加載完成關閉進度條   this.isShow = false   // 加載完成的回調   this.$emit('callback', 'load success')   return   }  }, 10)  }, }, }</script><style lang="stylus" rel="stylesheet/stylus"> .progress-bar { position fixed top 0 height 6px width 0 background-color #999 } .fade { &-enter-active, &-leave-active {  transition: all .3s } &-enter, &-leave-active {  opacity: 0 } }</style>