Create progress.js

add nvue component <progress>

src/platforms/app-plus-nvue/runtime/components/progress.js

+import {
+  PRIMARY_COLOR
+} from '../constants'
+
+import {
+  emitter
+} from '../mixins'
+
+const BACKGROUND_COLOR = '#EBEBEB'
+const ANIMATE_INTERVAL = 30
+const FONT_SIZE = 16
+const STROKE_WIDTH = 6
+
+function getProgress (weex) {
+  return {
+    name: 'Progress',
+    mixins: [emitter],
+    props: {
+      percent: {
+        type: [String, Number],
+        default: 0
+      },
+      showInfo: {
+        type: Boolean,
+        default: false
+      },
+      borderRadius: {
+        type: [String, Number],
+        default: 0
+      },
+      fontSize: {
+        type: [String, Number],
+        default: FONT_SIZE
+      },
+      strokeWidth: {
+        type: [String, Number],
+        default: STROKE_WIDTH
+      },
+      active: {
+        type: Boolean,
+        default: false
+      },
+      activeColor: {
+        type: String,
+        default: PRIMARY_COLOR
+      },
+      activeMode: {
+        type: String,
+        default: 'backwards'
+      },
+      backgroundColor: {
+        type: String,
+        default: BACKGROUND_COLOR
+      }
+    },
+    data () {
+      return {
+        width: 0,
+        curPercent: 0
+      }
+    },
+    computed: {
+      barStyle () {
+        return {
+          height: this.strokeWidth,
+          borderRadius: this.borderRadius,
+          backgroundColor: this.backgroundColor
+        }
+      },
+      innerBarStyle () {
+        return {
+          width: this.activeWidth,
+          height: this.strokeWidth,
+          backgroundColor: this.activeColor
+        }
+      },
+      activeWidth () {
+        return this.curPercent * this.width / 100
+      },
+      finalPercent () {
+        let percent = parseFloat(this.percent, 10)
+        percent > 100 && (percent = 100)
+        percent < 0 && (percent = 0)
+        return percent
+      }
+    },
+    watch: {
+      finalPercent (newVal, oldVal) {
+        this._timerId && clearInterval(this._timerId)
+        this._lastPercent = oldVal || 0
+        this._animate()
+      }
+    },
+    mounted () {
+      setTimeout(() => {
+        const dom = weex.requireModule('dom')
+        dom.getComponentRect(this.$refs.progress, res => {
+          this.width = res.size.width
+          this._animate()
+        })
+      }, 50)
+    },
+    methods: {
+      _animate () {
+        const percent = this.finalPercent
+        if (!this.active) {
+          return (this.curPercent = percent)
+        }
+        this.curPercent = this.activeMode === 'forwards' ? this._lastPercent : 0
+        this._timerId = setInterval(() => {
+          if (percent <= this.curPercent + 1) {
+            this.curPercent = percent
+            clearInterval(this._timerId)
+            this.$trigger('activeend', {
+              curPercent: this.curPercent
+            })
+          }
+          else {
+            ++this.curPercent
+          }
+        }, ANIMATE_INTERVAL)
+      }
+    },
+    render (createElement) {
+      const _vm = this
+      return createElement('div',
+        _vm._g({
+          ref: 'progress',
+          staticClass: ['uni-progress']
+        }, _vm.$listeners),
+        [
+          createElement('div', {
+            staticClass: ['uni-progress-bar'],
+            style: _vm.barStyle
+          }, [
+            createElement('div', {
+              staticClass: ['uni-progress-inner-bar'],
+              style: _vm.innerBarStyle
+            })
+          ]), _vm.showInfo ? [
+            createElement('u-text', {
+              staticClass: ['uni-progress-info'],
+              style: {
+                fontSize: _vm.fontSize
+              }
+            }, [_vm.curPercent + '%'])
+          ] : _vm._e()
+        ], 2)
+    },
+    style: {
+      'uni-progress': {
+        flexDirection: 'row',
+        alignItems: 'center'
+      },
+      'uni-progress-bar': {
+        flex: 1
+      },
+      'uni-progress-inner-bar': {
+        position: 'absolute'
+      },
+      'uni-progress-info': {
+        marginLeft: '15px'
+      }
+    }
+  }
+}
+
+export default function init (Vue, weex) {
+  Vue.component('progress', getProgress(weex))
+}