feat: migrate Circle component

breaking-changes.md

@@ -16,6 +16,7 @@
 
 ## v-model API 变更
 
+- Circle: `v-model` 调整为 `v-model:currentRate`
 - Popup: `v-model` 调整为 `v-model:show`
 - Switch: v-model 对应的属性名和事件名由 `value/input` 调整为 `modelValue/update:modelValue`
 

src-next/circle/README.md

@@ -0,0 +1,126 @@
+# Circle
+
+### Install
+
+```js
+import Vue from 'vue';
+import { Circle } from 'vant';
+
+Vue.use(Circle);
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-circle v-model:currentRate="currentRate" :rate="30" :speed="100" :text="text" />
+```
+
+```js
+export default {
+  data() {
+    return {
+      currentRate: 0,
+    };
+  },
+  computed: {
+    text() {
+      return this.currentRate.toFixed(0) + '%';
+    },
+  },
+};
+```
+
+### Custom Width
+
+```html
+<van-circle
+  v-model:currentRate="currentRate"
+  :rate="rate"
+  :stroke-width="60"
+  text="Custom Width"
+/>
+```
+
+### Custom Color
+
+```html
+<van-circle
+  v-model:currentRate="currentRate"
+  :rate="rate"
+  layer-color="#ebedf0"
+  text="Custom Color"
+/>
+```
+
+### Gradient
+
+```html
+<van-circle
+  v-model:currentRate="currentRate"
+  :rate="rate"
+  :color="gradientColor"
+  text="Gradient"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      currentRate: 0,
+      gradientColor: {
+        '0%': '#3fecff',
+        '100%': '#6149f6',
+      },
+    };
+  },
+};
+```
+
+### Counter Clockwise
+
+```html
+<van-circle
+  v-model:currentRate="currentRate"
+  :rate="rate"
+  :clockwise="false"
+  text="Counter Clockwise"
+/>
+```
+
+### Custom Size
+
+```html
+<van-circle
+  v-model:currentRate="currentRate"
+  :rate="rate"
+  size="120px"
+  text="Custom Size"
+/>
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model:currentRate | Current rate | _number_ | - |
+| rate | Target rate | _number \| string_ | `100` |
+| size | Circle size | _number \| string_ | `100px` |
+| color `v2.1.4` | Progress color, passing object to render gradient | _string \| object_ | `#1989fa` |
+| layer-color | Layer color | _string_ | `white` |
+| fill | Fill color | _string_ | `none` |
+| speed | Animate speed（rate/s） | _number \| string_ | `0` |
+| text | Text | _string_ | - |
+| stroke-width | Stroke width | _number \| string_ | `40` |
+| stroke-linecap `v2.2.15` | Stroke linecap，can be set to `sqaure` `butt` | _string_ | `round` |
+| clockwise | Whether to be clockwise | _boolean_ | `true` |
+
+### Slots
+
+| Name    | Description         |
+| ------- | ------------------- |
+| default | custom text content |

src-next/circle/README.zh-CN.md

@@ -0,0 +1,143 @@
+# Circle 环形进度条
+
+### 引入
+
+```js
+import Vue from 'vue';
+import { Circle } from 'vant';
+
+Vue.use(Circle);
+```
+
+## 代码演示
+
+### 基础用法
+
+`rate`属性表示进度条的目标进度，`v-model:currentRate`表示动画过程中的实时进度。当`rate`发生变化时，`v-model:currentRate`会以`speed`的速度变化，直至达到`rate`设定的值。
+
+```html
+<van-circle
+  v-model:currentRate="currentRate"
+  :rate="30"
+  :speed="100"
+  :text="text"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      currentRate: 0,
+    };
+  },
+  computed: {
+    text() {
+      return this.currentRate.toFixed(0) + '%';
+    },
+  },
+};
+```
+
+### 宽度定制
+
+通过`stroke-width`属性来控制进度条宽度
+
+```html
+<van-circle
+  v-model:currentRate="currentRate"
+  :rate="rate"
+  :stroke-width="60"
+  text="宽度定制"
+/>
+```
+
+### 颜色定制
+
+通过`color`属性来控制进度条颜色，`layer-color`属性来控制轨道颜色
+
+```html
+<van-circle
+  v-model:currentRate="currentRate"
+  :rate="rate"
+  layer-color="#ebedf0"
+  text="颜色定制"
+/>
+```
+
+### 渐变色
+
+`color`属性支持传入对象格式来定义渐变色
+
+```html
+<van-circle
+  v-model:currentRate="currentRate"
+  :rate="rate"
+  :color="gradientColor"
+  text="渐变色"
+/>
+```
+
+```js
+export default {
+  data() {
+    return {
+      currentRate: 0,
+      gradientColor: {
+        '0%': '#3fecff',
+        '100%': '#6149f6',
+      },
+    };
+  },
+};
+```
+
+### 逆时针方向
+
+将`clockwise`设置为`false`，进度会从逆时针方向开始
+
+```html
+<van-circle
+  v-model:currentRate="currentRate"
+  :rate="rate"
+  :clockwise="false"
+  text="逆时针方向"
+/>
+```
+
+### 大小定制
+
+通过`size`属性设置圆环直径
+
+```html
+<van-circle
+  v-model:currentRate="currentRate"
+  :rate="rate"
+  size="120px"
+  text="大小定制"
+/>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model:currentRate | 当前进度 | _number_ | - |
+| rate | 目标进度 | _number \| string_ | `100` |
+| size | 圆环直径，默认单位为 `px` | _number \| string_ | `100px` |
+| color `v2.1.4` | 进度条颜色，传入对象格式可以定义渐变色 | _string \| object_ | `#1989fa` |
+| layer-color | 轨道颜色 | _string_ | `white` |
+| fill | 填充颜色 | _string_ | `none` |
+| speed | 动画速度（单位为 rate/s） | _number \| string_ | `0` |
+| text | 文字 | _string_ | - |
+| stroke-width | 进度条宽度 | _number \| string_ | `40` |
+| stroke-linecap `v2.2.15` | 进度条端点的形状，可选值为`sqaure` `butt` | _string_ | `round` |
+| clockwise | 是否顺时针增加 | _boolean_ | `true` |
+
+### Slots
+
+| 名称    | 说明           |
+| ------- | -------------- |
+| default | 自定义文字内容 |

src-next/circle/demo/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <demo-section>
+    <demo-block :title="t('basicUsage')">
+      <van-circle
+        v-model:currentRate="currentRate1"
+        :rate="rate"
+        :speed="100"
+        :text="currentRate1.toFixed(0) + '%'"
+      />
+    </demo-block>
+
+    <demo-block :title="t('customStyle')">
+      <van-circle
+        v-model:currentRate="currentRate3"
+        :rate="rate"
+        :speed="100"
+        :stroke-width="60"
+        :text="t('customWidth')"
+      />
+
+      <van-circle
+        v-model:currentRate="currentRate3"
+        color="#ee0a24"
+        :rate="rate"
+        layer-color="#ebedf0"
+        :speed="100"
+        :text="t('customColor')"
+      />
+
+      <van-circle
+        v-model:currentRate="currentRate2"
+        :rate="rate"
+        :speed="100"
+        :color="gradientColor"
+        :text="t('gradient')"
+      />
+
+      <van-circle
+        v-model:currentRate="currentRate4"
+        color="#07c160"
+        :rate="rate"
+        :speed="100"
+        :clockwise="false"
+        :text="t('counterClockwise')"
+        style="margin-top: 15px;"
+      />
+
+      <van-circle
+        v-model:currentRate="currentRate4"
+        color="#7232dd"
+        :rate="rate"
+        :speed="100"
+        size="120px"
+        :clockwise="false"
+        :text="t('customSize')"
+        style="margin-top: 15px;"
+      />
+    </demo-block>
+
+    <div style="margin-top: 15px;">
+      <van-button :text="t('add')" type="primary" size="small" @click="add" />
+      <van-button
+        :text="t('decrease')"
+        type="danger"
+        size="small"
+        @click="reduce"
+      />
+    </div>
+  </demo-section>
+</template>
+
+<script>
+const format = (rate) => Math.min(Math.max(rate, 0), 100);
+
+export default {
+  i18n: {
+    'zh-CN': {
+      gradient: '渐变色',
+      customSize: '大小定制',
+      customStyle: '样式定制',
+      customColor: '颜色定制',
+      customWidth: '宽度定制',
+      counterClockwise: '逆时针',
+    },
+    'en-US': {
+      gradient: 'Gradient',
+      customSize: 'Custom Size',
+      customStyle: 'Custom Style',
+      customColor: 'Custom Color',
+      customWidth: 'Custom Width',
+      counterClockwise: 'Counter Clockwise',
+    },
+  },
+
+  data() {
+    return {
+      rate: 70,
+      currentRate1: 70,
+      currentRate2: 70,
+      currentRate3: 70,
+      currentRate4: 70,
+      gradientColor: {
+        '0%': '#3fecff',
+        '100%': '#6149f6',
+      },
+    };
+  },
+
+  methods: {
+    add() {
+      this.rate = format(this.rate + 20);
+    },
+
+    reduce() {
+      this.rate = format(this.rate - 20);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+@import '../../style/var';
+
+.demo-circle {
+  .van-circle {
+    margin-left: @padding-md;
+  }
+
+  .van-button {
+    margin: @padding-md 0 0 10px;
+
+    &:first-of-type {
+      margin-left: @padding-md;
+    }
+  }
+}
+</style>

src-next/circle/index.js

@@ -0,0 +1,184 @@
+import { createNamespace, isObject, addUnit } from '../utils';
+import { raf, cancelRaf } from '../utils/dom/raf';
+import { BLUE, WHITE } from '../utils/constant';
+
+const [createComponent, bem] = createNamespace('circle');
+
+const PERIMETER = 3140;
+
+let uid = 0;
+
+function format(rate) {
+  return Math.min(Math.max(rate, 0), 100);
+}
+
+function getPath(clockwise, viewBoxSize) {
+  const sweepFlag = clockwise ? 1 : 0;
+  return `M ${viewBoxSize / 2} ${
+    viewBoxSize / 2
+  } m 0, -500 a 500, 500 0 1, ${sweepFlag} 0, 1000 a 500, 500 0 1, ${sweepFlag} 0, -1000`;
+}
+
+export default createComponent({
+  props: {
+    text: String,
+    strokeLinecap: String,
+    currentRate: {
+      type: Number,
+      default: 0,
+    },
+    speed: {
+      type: [Number, String],
+      default: 0,
+    },
+    size: {
+      type: [Number, String],
+      default: 100,
+    },
+    fill: {
+      type: String,
+      default: 'none',
+    },
+    rate: {
+      type: [Number, String],
+      default: 100,
+    },
+    layerColor: {
+      type: String,
+      default: WHITE,
+    },
+    color: {
+      type: [String, Object],
+      default: BLUE,
+    },
+    strokeWidth: {
+      type: [Number, String],
+      default: 40,
+    },
+    clockwise: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  beforeCreate() {
+    this.uid = `van-circle-gradient-${uid++}`;
+  },
+
+  computed: {
+    style() {
+      const size = addUnit(this.size);
+      return {
+        width: size,
+        height: size,
+      };
+    },
+
+    path() {
+      return getPath(this.clockwise, this.viewBoxSize);
+    },
+
+    viewBoxSize() {
+      return +this.strokeWidth + 1000;
+    },
+
+    layerStyle() {
+      const offset = (PERIMETER * this.currentRate) / 100;
+
+      return {
+        stroke: `${this.color}`,
+        strokeWidth: `${+this.strokeWidth + 1}px`,
+        strokeLinecap: this.strokeLinecap,
+        strokeDasharray: `${offset}px ${PERIMETER}px`,
+      };
+    },
+
+    hoverStyle() {
+      return {
+        fill: `${this.fill}`,
+        stroke: `${this.layerColor}`,
+        strokeWidth: `${this.strokeWidth}px`,
+      };
+    },
+
+    gradient() {
+      return isObject(this.color);
+    },
+
+    LinearGradient() {
+      if (!this.gradient) {
+        return;
+      }
+
+      const Stops = Object.keys(this.color)
+        .sort((a, b) => parseFloat(a) - parseFloat(b))
+        .map((key, index) => (
+          <stop key={index} offset={key} stop-color={this.color[key]} />
+        ));
+
+      return (
+        <defs>
+          <linearGradient id={this.uid} x1="100%" y1="0%" x2="0%" y2="0%">
+            {Stops}
+          </linearGradient>
+        </defs>
+      );
+    },
+  },
+
+  watch: {
+    rate: {
+      handler(rate) {
+        this.startTime = Date.now();
+        this.startRate = this.currentRate;
+        this.endRate = format(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);
+        } else {
+          this.$emit('update:currentRate', this.endRate);
+        }
+      },
+      immediate: true,
+    },
+  },
+
+  methods: {
+    animate() {
+      const now = Date.now();
+      const progress = Math.min((now - this.startTime) / this.duration, 1);
+      const rate = progress * (this.endRate - this.startRate) + this.startRate;
+
+      this.$emit('update:currentRate', format(parseFloat(rate.toFixed(1))));
+
+      if (this.increase ? rate < this.endRate : rate > this.endRate) {
+        this.rafId = raf(this.animate);
+      }
+    },
+  },
+
+  render() {
+    return (
+      <div class={bem()} style={this.style}>
+        <svg viewBox={`0 0 ${this.viewBoxSize} ${this.viewBoxSize}`}>
+          {this.LinearGradient}
+          <path class={bem('hover')} style={this.hoverStyle} d={this.path} />
+          <path
+            d={this.path}
+            class={bem('layer')}
+            style={this.layerStyle}
+            stroke={this.gradient ? `url(#${this.uid})` : this.color}
+          />
+        </svg>
+        {this.$slots.default
+          ? this.$slots.default()
+          : this.text && <div class={bem('text')}>{this.text}</div>}
+      </div>
+    );
+  },
+});

src-next/circle/index.less

@@ -0,0 +1,34 @@
+@import '../style/var';
+
+.van-circle {
+  position: relative;
+  display: inline-block;
+  text-align: center;
+
+  svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &__layer {
+    fill: none;
+    stroke-linecap: round;
+  }
+
+  &__text {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 @padding-base;
+    color: @circle-text-color;
+    font-weight: @circle-text-font-weight;
+    font-size: @circle-text-font-size;
+    line-height: @circle-text-line-height;
+    transform: translateY(-50%);
+  }
+}

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

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders demo correctly 1`] = `
+<div>
+  <div>
+    <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+      </svg>
+      <div class="van-circle__text">70%</div>
+    </div>
+  </div>
+  <div>
+    <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1060 1060">
+        <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 60px;"></path>
+        <path d="M 530 530 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 61px; stroke-dasharray: 2198px 3140px;"></path>
+      </svg>
+      <div class="van-circle__text">宽度定制</div>
+    </div>
+    <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #ebedf0; stroke-width: 40px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#ee0a24" class="van-circle__layer" style="stroke: #ee0a24; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+      </svg>
+      <div class="van-circle__text">颜色定制</div>
+    </div>
+    <div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
+        <defs>
+          <linearGradient id="van-circle-gradient-3" x1="100%" y1="0%" x2="0%" y2="0%">
+            <stop offset="0%" stop-color="#3fecff"></stop>
+            <stop offset="100%" stop-color="#6149f6"></stop>
+          </linearGradient>
+        </defs>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="url(#van-circle-gradient-3)" class="van-circle__layer" style="stroke: [object Object]; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+      </svg>
+      <div class="van-circle__text">渐变色</div>
+    </div>
+    <div class="van-circle" style="width: 100px; height: 100px; margin-top: 15px;"><svg viewBox="0 0 1040 1040">
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#07c160" class="van-circle__layer" style="stroke: #07c160; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+      </svg>
+      <div class="van-circle__text">逆时针</div>
+    </div>
+    <div class="van-circle" style="width: 120px; height: 120px; margin-top: 15px;"><svg viewBox="0 0 1040 1040">
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
+        <path d="M 520 520 m 0, -500 a 500, 500 0 1, 0 0, 1000 a 500, 500 0 1, 0 0, -1000" stroke="#7232dd" class="van-circle__layer" style="stroke: #7232dd; stroke-width: 41px; stroke-dasharray: 2198px 3140px;"></path>
+      </svg>
+      <div class="van-circle__text">大小定制</div>
+    </div>
+  </div>
+  <div style="margin-top: 15px;"><button class="van-button van-button--primary van-button--small">
+      <div class="van-button__content"><span class="van-button__text">增加</span></div>
+    </button> <button class="van-button van-button--danger van-button--small">
+      <div class="van-button__content"><span class="van-button__text">减少</span></div>
+    </button></div>
+</div>
+`;

src-next/circle/test/__snapshots__/index.spec.js.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`size prop 1`] = `
+<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
+    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
+    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 0px 3140px;"></path>
+  </svg></div>
+`;
+
+exports[`speed is 0 1`] = `
+<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
+    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
+    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-dasharray: 1570px 3140px;"></path>
+  </svg></div>
+`;
+
+exports[`stroke-linecap prop 1`] = `
+<div class="van-circle" style="width: 100px; height: 100px;"><svg viewBox="0 0 1040 1040">
+    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
+    <path d="M 520 520 m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000" stroke="#1989fa" class="van-circle__layer" style="stroke: #1989fa; stroke-width: 41px; stroke-linecap: square; stroke-dasharray: 0px 3140px;"></path>
+  </svg></div>
+`;

src-next/circle/test/demo.spec.js

@@ -0,0 +1,4 @@
+import Demo from '../demo';
+import { snapshotDemo } from '../../../test/demo';
+
+snapshotDemo(Demo);

src-next/circle/test/index.spec.js

@@ -0,0 +1,59 @@
+import Vue from 'vue';
+import Circle from '..';
+import { mount, later } from '../../../test';
+
+test('speed is 0', async () => {
+  const wrapper = mount(Circle, {
+    propsData: {
+      rate: 50,
+      value: 0,
+    },
+    listeners: {
+      input(value) {
+        Vue.nextTick(() => {
+          wrapper.setProps({ value });
+        });
+      },
+    },
+  });
+
+  await later();
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('animate', async () => {
+  const onInput = jest.fn();
+  mount(Circle, {
+    propsData: {
+      rate: 50,
+      speed: 100,
+    },
+    listeners: {
+      input: onInput,
+    },
+  });
+
+  await later(50);
+  expect(onInput).toHaveBeenCalled();
+  expect(onInput.mock.calls[0][0]).not.toEqual(0);
+});
+
+test('size prop', () => {
+  const wrapper = mount(Circle, {
+    propsData: {
+      size: 100,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
+test('stroke-linecap prop', () => {
+  const wrapper = mount(Circle, {
+    propsData: {
+      strokeLinecap: 'square',
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

src-next/utils/dom/raf.ts

@@ -2,7 +2,7 @@
  * requestAnimationFrame polyfill
  */
 
-import { isServer } from '..';
+import { inBrowser } from '..';
 
 let prev = Date.now();
 
@@ -16,7 +16,7 @@ function fallback(fn: FrameRequestCallback): number {
 }
 
 /* istanbul ignore next */
-const root = (isServer ? global : window) as Window;
+const root = (inBrowser ? window : global) as Window;
 
 /* istanbul ignore next */
 const iRaf = root.requestAnimationFrame || fallback;

vant.config.js

@@ -221,10 +221,10 @@ module.exports = {
           {
             title: '展示组件',
             items: [
-              // {
+              {
-              //   path: 'circle',
+                path: 'circle',
-              //   title: 'Circle 环形进度条',
+                title: 'Circle 环形进度条',
-              // },
+              },
               // {
               //   path: 'collapse',
               //   title: 'Collapse 折叠面板',
@@ -555,10 +555,10 @@ module.exports = {
           {
             title: 'Display Components',
             items: [
-              // {
+              {
-              //   path: 'circle',
+                path: 'circle',
-              //   title: 'Circle',
+                title: 'Circle',
-              // },
+              },
               // {
               //   path: 'collapse',
               //   title: 'Collapse',