[Doc] Circle: update demo

src/circle/README.md

@@ -64,7 +64,7 @@ export default {
 | color | Progress bar color | `String` | `#1989fa` |
 | layer-color | Layer color | `String` | `#fff` |
 | fill | Fill color | `String` | `none` |
-| speed | Animate speed（rate/s）| `Number` | - |
+| speed | Animate speed（rate/s）| `Number` | `0` |
 | text | Text | `String` | - |
 | stroke-width | Stroke width | `Number` | `40` |
 | clockwise | Is clockwise | `Boolean` | `true` |

src/circle/README.zh-CN.md

@@ -10,7 +10,8 @@ Vue.use(Circle);
 ## 代码演示
 
 ### 基础用法
-通过 `rate` 指定目标进度，`v-model` 代表当前进度，`speed` 控制动画速度
+
+`rate`属性表示进度条的目标进度，`v-model`表示动画过程中的实时进度。当`rate`发生变化时，`v-model`会以`speed`的速度变化，直至达到`rate`设定的值。
 
 ```html
 <van-circle
@@ -65,7 +66,7 @@ export default {
 | color | 进度条颜色 | `String` | `#1989fa` | - |
 | layer-color | 轨道颜色 | `String` | `#fff` | - |
 | fill | 填充颜色 | `String` | `none` | - |
-| speed | 动画速度（单位为 rate/s）| `Number` | - | - |
+| speed | 动画速度（单位为 rate/s）| `Number` | `0` | - |
 | text | 文字 | `String` | - | - |
 | stroke-width | 进度条宽度 | `Number` | `40` | - |
 | clockwise | 是否顺时针增加 | `Boolean` | `true` | - |

src/circle/demo/index.vue

@@ -8,18 +8,6 @@
         size="120px"
         :text="currentRate1.toFixed(0) + '%'"
       />
-      <van-circle
-        v-model="currentRate2"
-        color="#07c160"
-        fill="#fff"
-        :rate="rate"
-        size="120px"
-        layer-color="#ebedf0"
-        :speed="100"
-        :stroke-width="60"
-        :clockwise="false"
-        :text="currentRate2.toFixed(0) + '%'"
-      />
       <div>
         <van-button
           :text="$t('add')"
@@ -35,6 +23,21 @@
         />
       </div>
     </demo-block>
+
+    <demo-block :title="$t('customStyle')">
+      <van-circle
+        v-model="currentRate2"
+        color="#07c160"
+        fill="#fff"
+        :rate="rate"
+        size="120px"
+        layer-color="#ebedf0"
+        :speed="100"
+        :stroke-width="60"
+        :clockwise="false"
+        :text="currentRate2.toFixed(0) + '%'"
+      />
+    </demo-block>
   </demo-section>
 </template>
 
@@ -44,10 +47,10 @@ const format = rate => Math.min(Math.max(rate, 0), 100);
 export default {
   i18n: {
     'zh-CN': {
-      title2: '样式定制'
+      customStyle: '样式定制'
     },
     'en-US': {
-      title2: 'Custom Style'
+      customStyle: 'Custom Style'
     }
   },
 

src/circle/index.js

@@ -56,6 +56,7 @@ export default createComponent({
     layerStyle() {
       let offset = (PERIMETER * (100 - this.value)) / 100;
       offset = this.clockwise ? offset : PERIMETER * 2 - offset;
+
       return {
         stroke: `${this.color}`,
         strokeDashoffset: `${offset}px`,
@@ -80,6 +81,7 @@ export default createComponent({
         this.endRate = format(this.rate);
         this.increase = this.endRate > this.startRate;
         this.duration = Math.abs(((this.startRate - this.endRate) * 1000) / this.speed);
+
         if (this.speed) {
           cancelRaf(this.rafId);
           this.rafId = raf(this.animate);
@@ -97,6 +99,7 @@ export default createComponent({
       const progress = Math.min((now - this.startTime) / this.duration, 1);
       const rate = progress * (this.endRate - this.startRate) + this.startRate;
       this.$emit('input', format(parseFloat(rate.toFixed(1))));
+
       if (this.increase ? rate < this.endRate : rate > this.endRate) {
         this.rafId = raf(this.animate);
       }

src/circle/test/__snapshots__/demo.spec.js.snap

@@ -9,13 +9,15 @@ exports[`renders demo correctly 1`] = `
       </svg>
       <div class="van-circle__text">30%</div>
     </div>
+    <div><button class="van-button van-button--primary van-button--small"><span class="van-button__text">增加</span></button> <button class="van-button van-button--danger van-button--small"><span class="van-button__text">减少</span></button></div>
+  </div>
+  <div>
     <div class="van-circle" style="width: 120px; height: 120px;"><svg viewBox="0 0 1060 1060">
         <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill: #fff; stroke: #ebedf0; stroke-width: 60px;"></path>
         <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke: #07c160; stroke-dashoffset: 4082px; stroke-width: 61px;"></path>
       </svg>
       <div class="van-circle__text">30%</div>
     </div>
-    <div><button class="van-button van-button--primary van-button--small"><span class="van-button__text">增加</span></button> <button class="van-button van-button--danger van-button--small"><span class="van-button__text">减少</span></button></div>
   </div>
 </div>
 `;