[bugfix] Progress: refactor component

fix #1609

packages/progress/index.less

@@ -1,36 +1,31 @@
 @import '../common/style/var.less';
 
 .van-progress {
-  height: 4px;
   position: relative;
-  border-radius: 4px;
+  height: 4px;
   background: @gray-light;
+  border-radius: 4px;
 
   &__portion {
+    position: absolute;
     left: 0;
     height: 100%;
-    position: absolute;
     border-radius: inherit;
-
-    &--with-pivot {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
   }
 
   &__pivot {
+    position: absolute;
     top: 50%;
     right: 0;
     min-width: 2em;
     padding: 0 5px;
     font-size: 10px;
-    position: absolute;
     line-height: 1.6;
     text-align: center;
-    border-radius: 1em;
     word-break: keep-all;
-    box-sizing: border-box;
     background-color: @gray-light;
-    transform: translate(100%, -50%);
+    border-radius: 1em;
+    transform: translateY(-50%);
+    box-sizing: border-box;
   }
 }

packages/progress/index.ts

@@ -19,57 +19,5 @@ VantComponent({
       type: String,
       value: '#fff'
     }
-  },
-
-  data: {
-    pivotWidth: 0,
-    progressWidth: 0
-  },
-
-  watch: {
-    pivotText: 'getWidth',
-    showPivot: 'getWidth'
-  },
-
-  computed: {
-    portionStyle() {
-      const width = (this.data.progressWidth - this.data.pivotWidth) * this.data.percentage / 100 + 'px';
-      const background = this.getCurrentColor();
-      return `width: ${width}; background: ${background}; `;
-    },
-
-    pivotStyle() {
-      const color = this.data.textColor;
-      const background = this.data.pivotColor || this.getCurrentColor();
-      return `color: ${color}; background: ${background}`
-    },
-
-    text() {
-      return this.data.pivotText || this.data.percentage + '%';
-    }
-  },
-
-  mounted() {
-    this.getWidth();
-  },
-
-  methods: {
-    getCurrentColor() {
-      return this.data.inactive ? '#cacaca' : this.data.color;
-    },
-
-    getWidth() {
-      this.getRect('.van-progress').then(rect => {
-        this.set({
-          progressWidth: rect.width
-        });
-      });
-
-      this.getRect('.van-progress__pivot').then(rect => {
-        this.set({
-          pivotWidth: rect.width || 0
-        });
-      });
-    }
   }
 });

packages/progress/index.wxml

@@ -1,14 +1,16 @@
+<wxs src="./index.wxs" module="getters" />
+
 <view class="van-progress custom-class">
   <view
-    class="van-progress__portion {{ showPivot && text ? 'van-progress__portion--with-pivot' : '' }}"
-    style="{{ portionStyle }}"
+    class="van-progress__portion"
+    style="width: {{ percentage }}%; background: {{ inactive ? '#cacaca' : color }}"
   >
     <view
-      wx:if="{{ showPivot && text }}"
-      style="{{ pivotStyle }}"
+      wx:if="{{ showPivot && getters.text(pivotText, percentage) }}"
+      style="color: {{ textColor }}; background: {{ pivotColor ? pivotColor : inactive ? '#cacaca' : color }}"
       class="van-progress__pivot"
     >
-      {{ text }}
+      {{ getters.text(pivotText, percentage) }}
     </view>
   </view>
 </view>

packages/progress/index.wxs

@@ -0,0 +1,5 @@
+module.exports = {
+  text: function(pivotText, percentage) {
+    return pivotText || percentage + '%';
+  }
+};