fix(progress): improve pivot position (#3808)

fix #3592

example/pages/progress/index.wxml

@@ -1,9 +1,9 @@
 <demo-block title="基础用法">
-  <van-progress custom-class="progress-position" percentage="50" />
+  <van-progress custom-class="progress-position" percentage="0" />
 </demo-block>
 
 <demo-block title="线条粗细">
-  <van-progress custom-class="progress-position" stroke-width="8" percentage="50" />
+  <van-progress custom-class="progress-position" stroke-width="8" percentage="100" />
 </demo-block>
 
 <demo-block title="置灰">

packages/progress/README.md

@@ -30,6 +30,8 @@
 
 ### 置灰
 
+设置`inactive`属性后进度条将置灰。
+
 ```html
 <van-progress inactive percentage="50" />
 ```
@@ -55,17 +57,17 @@
 
 ### Props
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- | --- |
+| --- | --- | --- | --- |
-| inactive | 是否置灰 | _boolean_ | `false` | - |
+| inactive | 是否置灰 | _boolean_ | `false` |
-| percentage | 进度百分比 | _number_ | `false` | - |
+| percentage | 进度百分比 | _number_ | `0` |
-| stroke-width | 进度条粗细，默认单位为`px` | _string \| number_ | `4px` | - |
+| stroke-width | 进度条粗细，默认单位为`px` | _string \| number_ | `4px` |
-| show-pivot | 是否显示进度文字 | _boolean_ | `true` | - |
+| show-pivot | 是否显示进度文字 | _boolean_ | `true` |
-| color | 进度条颜色 | _string_ | `#1989fa` | - |
+| color | 进度条颜色 | _string_ | `#1989fa` |
-| text-color | 进度文字颜色 | _string_ | `#fff` | - |
+| text-color | 进度文字颜色 | _string_ | `#fff` |
-| track-color | 轨道颜色 | _string_ | `#e5e5e5` | 1.0.0 |
+| track-color | 轨道颜色 | _string_ | `#e5e5e5` |
-| pivot-text | 文字显示 | _string_ | 百分比文字 | - |
+| pivot-text | 文字显示 | _string_ | 百分比文字 |
-| pivot-color | 文字背景色 | _string_ | 与进度条颜色一致 | - |
+| pivot-color | 文字背景色 | _string_ | 与进度条颜色一致 |
 
 ### 外部样式类
 

packages/progress/index.less

@@ -18,13 +18,12 @@
   &__pivot {
     position: absolute;
     top: 50%;
-    right: 0;
     box-sizing: border-box;
-    min-width: 2em;
+    min-width: 3.6em;
     text-align: center;
     word-break: keep-all;
     border-radius: 1em;
-    transform: translateY(-50%);
+    transform: translate(0, -50%);
     .theme(color, '@progress-pivot-text-color');
     .theme(padding, '@progress-pivot-padding');
     .theme(font-size, '@progress-pivot-font-size');

packages/progress/index.ts

@@ -1,10 +1,14 @@
 import { VantComponent } from '../common/component';
 import { BLUE } from '../common/color';
+import { getRect } from '../common/utils';
 
 VantComponent({
   props: {
     inactive: Boolean,
-    percentage: Number,
+    percentage: {
+      type: Number,
+      observer: 'setLeft',
+    },
     pivotText: String,
     pivotColor: String,
     trackColor: String,
@@ -25,4 +29,27 @@ VantComponent({
       value: 4,
     },
   },
+
+  data: {
+    right: 0,
+  },
+
+  mounted() {
+    this.setLeft();
+  },
+
+  methods: {
+    setLeft() {
+      Promise.all([
+        getRect.call(this, '.van-progress'),
+        getRect.call(this, '.van-progress__pivot'),
+      ]).then(([portion, pivot]) => {
+        if (portion && pivot) {
+          this.setData({
+            right: (pivot.width * (this.data.percentage - 100)) / 100,
+          });
+        }
+      });
+    },
+  },
 });

packages/progress/index.wxml

@@ -1,20 +1,20 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
-<wxs src="./index.wxs" module="getters" />
+<wxs src="./index.wxs" module="computed" />
 
 <view
   class="van-progress custom-class"
-  style="height: {{ utils.addUnit(strokeWidth) }}; {{ trackColor ? 'background: ' + trackColor : '' }}"
+  style="{{ computed.rootStyle({ strokeWidth, trackColor }) }}"
 >
   <view
     class="van-progress__portion"
-    style="width: {{ percentage }}%; background: {{ inactive ? '#cacaca' : color }}"
+    style="{{ computed.portionStyle({ percentage, inactive, color }) }}"
   >
     <view
-      wx:if="{{ showPivot && getters.text(pivotText, percentage) }}"
+      wx:if="{{ showPivot && computed.pivotText(pivotText, percentage) }}"
-      style="color: {{ textColor }}; background: {{ pivotColor ? pivotColor : inactive ? '#cacaca' : color }}"
+      style="{{ computed.pivotStyle({ textColor, pivotColor, inactive, color, right }) }}"
       class="van-progress__pivot"
     >
-      {{ getters.text(pivotText, percentage) }}
+      {{ computed.pivotText(pivotText, percentage) }}
     </view>
   </view>
 </view>

packages/progress/index.wxs

@@ -1,5 +1,36 @@
+/* eslint-disable */
+var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+
+function pivotText(pivotText, percentage) {
+  return pivotText || percentage + '%';
+}
+
+function rootStyle(data) {
+  return style({
+    'height': data.strokeWidth ? utils.addUnit(data.strokeWidth) : '',
+    'background': data.trackColor,
+  });
+}
+
+function portionStyle(data) {
+  return style({
+    background: data.inactive ? '#cacaca' : data.color,
+    width: data.percentage ? data.percentage + '%' : '',
+  });
+}
+
+function pivotStyle(data) {
+  return style({
+    color: data.textColor,
+    right: data.right + 'px',
+    background: data.pivotColor ? data.pivotColor : data.inactive ? '#cacaca' : data.color,
+  });
+}
+
 module.exports = {
-  text: function(pivotText, percentage) {
+  pivotText: pivotText,
-    return pivotText || percentage + '%';
+  rootStyle: rootStyle,
-  }
+  portionStyle: portionStyle,
+  pivotStyle: pivotStyle,
 };

packages/wxs/add-unit.wxs

@@ -9,6 +9,4 @@ function addUnit(value) {
   return REGEXP.test('' + value) ? value + 'px' : value;
 }
 
-module.exports = {
+module.exports = addUnit;
-  addUnit: addUnit
-};

packages/wxs/bem.wxs

@@ -1,3 +1,4 @@
+/* eslint-disable */
 var array = require('./array.wxs');
 var object = require('./object.wxs');
 var PREFIX = 'van-';
@@ -35,4 +36,4 @@ function bem(name, conf) {
   return join(name, mods);
 }
 
-module.exports.bem = bem;
+module.exports = bem;

packages/wxs/memoize.wxs

@@ -2,6 +2,7 @@
  * Simple memoize
  * wxs doesn't support fn.apply, so this memoize only support up to 2 args
  */
+/* eslint-disable */
 
 function isPrimitive(value) {
   var type = typeof value;
@@ -51,4 +52,4 @@ function memoize(fn) {
   };
 }
 
-module.exports.memoize = memoize;
+module.exports = memoize;

packages/wxs/style.wxs

@@ -0,0 +1,15 @@
+/* eslint-disable */
+var object = require('./object.wxs');
+
+function style(styles) {
+  return object.keys(styles)
+    .filter(function (key) {
+      return styles[key];
+    })
+    .map(function (key) {
+      return [key, [styles[key]]].join(':');
+    })
+    .join(';');
+}
+
+module.exports = style;

packages/wxs/utils.wxs

@@ -1,7 +1,7 @@
 /* eslint-disable */
-var bem = require('./bem.wxs').bem;
+var bem = require('./bem.wxs');
-var memoize = require('./memoize.wxs').memoize;
+var memoize = require('./memoize.wxs');
-var addUnit = require('./add-unit.wxs').addUnit;
+var addUnit = require('./add-unit.wxs');
 
 module.exports = {
   bem: memoize(bem),