diff --git a/breaking-changes.md b/breaking-changes.md index 844e014b9..2f1be1acb 100644 --- a/breaking-changes.md +++ b/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` diff --git a/src-next/circle/README.md b/src-next/circle/README.md new file mode 100644 index 000000000..6b2ae7a1d --- /dev/null +++ b/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 + +``` + +```js +export default { + data() { + return { + currentRate: 0, + }; + }, + computed: { + text() { + return this.currentRate.toFixed(0) + '%'; + }, + }, +}; +``` + +### Custom Width + +```html + +``` + +### Custom Color + +```html + +``` + +### Gradient + +```html + +``` + +```js +export default { + data() { + return { + currentRate: 0, + gradientColor: { + '0%': '#3fecff', + '100%': '#6149f6', + }, + }; + }, +}; +``` + +### Counter Clockwise + +```html + +``` + +### Custom Size + +```html + +``` + +## 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 | diff --git a/src-next/circle/README.zh-CN.md b/src-next/circle/README.zh-CN.md new file mode 100644 index 000000000..dc12f5aa5 --- /dev/null +++ b/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 + +``` + +```js +export default { + data() { + return { + currentRate: 0, + }; + }, + computed: { + text() { + return this.currentRate.toFixed(0) + '%'; + }, + }, +}; +``` + +### 宽度定制 + +通过`stroke-width`属性来控制进度条宽度 + +```html + +``` + +### 颜色定制 + +通过`color`属性来控制进度条颜色，`layer-color`属性来控制轨道颜色 + +```html + +``` + +### 渐变色 + +`color`属性支持传入对象格式来定义渐变色 + +```html + +``` + +```js +export default { + data() { + return { + currentRate: 0, + gradientColor: { + '0%': '#3fecff', + '100%': '#6149f6', + }, + }; + }, +}; +``` + +### 逆时针方向 + +将`clockwise`设置为`false`，进度会从逆时针方向开始 + +```html + +``` + +### 大小定制 + +通过`size`属性设置圆环直径 + +```html + +``` + +## 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 | 自定义文字内容 | diff --git a/src-next/circle/demo/index.vue b/src-next/circle/demo/index.vue new file mode 100644 index 000000000..975e86e26 --- /dev/null +++ b/src-next/circle/demo/index.vue @@ -0,0 +1,137 @@ + + + + + diff --git a/src-next/circle/index.js b/src-next/circle/index.js new file mode 100644 index 000000000..0d3247577 --- /dev/null +++ b/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) => ( + + )); + + return ( + + + {Stops} + + + ); + }, + }, + + 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 ( +
+ + {this.LinearGradient} + + + + {this.$slots.default + ? this.$slots.default() + : this.text &&
{this.text}
} +
+ ); + }, +}); diff --git a/src-next/circle/index.less b/src-next/circle/index.less new file mode 100644 index 000000000..46edec25c --- /dev/null +++ b/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%); + } +} diff --git a/src-next/circle/test/__snapshots__/demo.spec.js.snap b/src-next/circle/test/__snapshots__/demo.spec.js.snap new file mode 100644 index 000000000..6e0db1b94 --- /dev/null +++ b/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`] = ` +
+
+
+ + + +
70%
+
+
+
+
+ + + +
宽度定制
+
+
+ + + +
颜色定制
+
+
+ + + + + + + + + +
渐变色
+
+
+ + + +
逆时针
+
+
+ + + +
大小定制
+
+
+
+
+`; diff --git a/src-next/circle/test/__snapshots__/index.spec.js.snap b/src-next/circle/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..8749d4958 --- /dev/null +++ b/src-next/circle/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,22 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`size prop 1`] = ` +
+ + +
+`; + +exports[`speed is 0 1`] = ` +
+ + +
+`; + +exports[`stroke-linecap prop 1`] = ` +
+ + +
+`; diff --git a/src-next/circle/test/demo.spec.js b/src-next/circle/test/demo.spec.js new file mode 100644 index 000000000..5c70922b5 --- /dev/null +++ b/src-next/circle/test/demo.spec.js @@ -0,0 +1,4 @@ +import Demo from '../demo'; +import { snapshotDemo } from '../../../test/demo'; + +snapshotDemo(Demo); diff --git a/src-next/circle/test/index.spec.js b/src-next/circle/test/index.spec.js new file mode 100644 index 000000000..5b6a1481f --- /dev/null +++ b/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(); +}); diff --git a/src-next/utils/dom/raf.ts b/src-next/utils/dom/raf.ts index fa32db10b..ca7bc1b42 100644 --- a/src-next/utils/dom/raf.ts +++ b/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; diff --git a/vant.config.js b/vant.config.js index 467ff4759..5a67a5bc6 100644 --- a/vant.config.js +++ b/vant.config.js @@ -221,10 +221,10 @@ module.exports = { { title: '展示组件', items: [ - // { - // path: 'circle', - // title: 'Circle 环形进度条', - // }, + { + path: 'circle', + title: 'Circle 环形进度条', + }, // { // path: 'collapse', // title: 'Collapse 折叠面板', @@ -555,10 +555,10 @@ module.exports = { { title: 'Display Components', items: [ - // { - // path: 'circle', - // title: 'Circle', - // }, + { + path: 'circle', + title: 'Circle', + }, // { // path: 'collapse', // title: 'Collapse',