[Improvement] Progress: pivot shouldn't cross border (#1135)

packages/progress/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div :class="b()">
-    <span :class="b('portion')" :style="portionStyle">
-      <span :class="b('pivot')" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span>
+    <span :class="b('portion', { 'with-pivot': showPivot })" :style="portionStyle">
+      <span v-if="showPivot" ref="pivot" :style="pivotStyle" :class="b('pivot')">{{ pivotText }}</span>
     </span>
   </div>
 </template>
@@ -40,24 +40,52 @@ export default create({
     }
   },
 
+  data() {
+    return {
+      pivotWidth: 0,
+      progressWidth: 0
+    };
+  },
+
   computed: {
-    componentColor() {
+    currentColor() {
       return this.inactive ? '#cacaca' : this.color;
     },
 
     pivotStyle() {
       return {
         color: this.textColor,
-        background: this.pivotColor || this.componentColor
+        background: this.pivotColor || this.currentColor
       };
     },
 
     portionStyle() {
       return {
-        width: this.percentage + '%',
-        background: this.componentColor
+        width: (this.progressWidth - this.pivotWidth) * this.percentage / 100 + 'px',
+        background: this.currentColor
       };
     }
+  },
+
+  mounted() {
+    this.getWidth();
+  },
+
+  watch: {
+    showPivot() {
+      this.getWidth();
+    },
+
+    pivotText() {
+      this.getWidth();
+    }
+  },
+
+  methods: {
+    getWidth() {
+      this.progressWidth = this.$el.offsetWidth;
+      this.pivotWidth = this.$refs.pivot ? this.$refs.pivot.offsetWidth : 0;
+    }
   }
 });
 </script>

packages/progress/test/__snapshots__/demo.spec.js.snap

@@ -3,19 +3,19 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion" style="width:50%;background:#38f;"><span class="van-progress__pivot" style="color:#fff;background:#38f;">50%</span></span>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#38f;"><span class="van-progress__pivot" style="color:#fff;background:#38f;">50%</span></span>
     </div>
   </div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion" style="width:50%;background:#cacaca;"><span class="van-progress__pivot" style="color:#fff;background:#cacaca;">50%</span></span>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#cacaca;"><span class="van-progress__pivot" style="color:#fff;background:#cacaca;">50%</span></span>
     </div>
   </div>
   <div>
-    <div class="van-progress"><span class="van-progress__portion" style="width:25%;background:#f2826a;"><span class="van-progress__pivot" style="color:#fff;background:#f2826a;">橙色</span></span>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#f2826a;"><span class="van-progress__pivot" style="color:#fff;background:#f2826a;">橙色</span></span>
     </div>
-    <div class="van-progress"><span class="van-progress__portion" style="width:50%;background:#f3594b;"><span class="van-progress__pivot" style="color:#fff;background:#f3594b;">红色</span></span>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:#f3594b;"><span class="van-progress__pivot" style="color:#fff;background:#f3594b;">红色</span></span>
     </div>
-    <div class="van-progress"><span class="van-progress__portion" style="width:75%;background:linear-gradient(to right, #be99ff, #7232dd);"><span class="van-progress__pivot" style="color:#fff;background:#7232dd;">紫色</span></span>
+    <div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width:0px;background:linear-gradient(to right, #be99ff, #7232dd);"><span class="van-progress__pivot" style="color:#fff;background:#7232dd;">紫色</span></span>
     </div>
   </div>
 </div>

packages/progress/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`calc width 1`] = `<div class="van-progress"><span class="van-progress__portion" style="width: 0px; background: rgb(51, 136, 255);"><!----></span></div>`;
+
+exports[`calc width 2`] = `
+<div class="van-progress"><span class="van-progress__portion van-progress__portion--with-pivot" style="width: 0px; background: rgb(51, 136, 255);"><span class="van-progress__pivot" style="color: rgb(255, 255, 255); background: rgb(51, 136, 255);">test</span></span>
+</div>
+`;

packages/progress/test/index.spec.js

@@ -0,0 +1,16 @@
+import Progress from '../';
+import { mount } from '@vue/test-utils';
+
+test('calc width', () => {
+  const wrapper = mount(Progress, {
+    propsData: {
+      showPivot: false,
+      percentage: 100
+    }
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+
+  wrapper.vm.showPivot = true;
+  wrapper.vm.pivotText = 'test';
+  expect(wrapper.html()).toMatchSnapshot();
+});

packages/vant-css/src/progress.css

@@ -11,6 +11,11 @@
     height: 100%;
     position: absolute;
     border-radius: inherit;
+
+    &--with-pivot {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   }
 
   &__pivot {
@@ -26,6 +31,6 @@
     word-break: keep-all;
     box-sizing: border-box;
     background-color: $gray-light;
-    transform: translate(50%, -50%);
+    transform: translate(100%, -50%);
   }
 }