mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat: migrate Circle component
This commit is contained in:
chenjiahan
parent
8c4c51fea1
commit
94ae79d953
@ -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`
|
||||
|
||||
|
||||
126
src-next/circle/README.md
Normal file
126
src-next/circle/README.md
Normal file
@ -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 |
|
||||
143
src-next/circle/README.zh-CN.md
Normal file
143
src-next/circle/README.zh-CN.md
Normal file
@ -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 | 自定义文字内容 |
|
||||
137
src-next/circle/demo/index.vue
Normal file
137
src-next/circle/demo/index.vue
Normal file
@ -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>
|
||||
184
src-next/circle/index.js
Normal file
184
src-next/circle/index.js
Normal file
@ -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>
|
||||
);
|
||||
},
|
||||
});
|
||||
34
src-next/circle/index.less
Normal file
34
src-next/circle/index.less
Normal file
@ -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%);
|
||||
}
|
||||
}
|
||||
57
src-next/circle/test/__snapshots__/demo.spec.js.snap
Normal file
57
src-next/circle/test/__snapshots__/demo.spec.js.snap
Normal file
@ -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>
|
||||
`;
|
||||
22
src-next/circle/test/__snapshots__/index.spec.js.snap
Normal file
22
src-next/circle/test/__snapshots__/index.spec.js.snap
Normal file
@ -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>
|
||||
`;
|
||||
4
src-next/circle/test/demo.spec.js
Normal file
4
src-next/circle/test/demo.spec.js
Normal file
@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import { snapshotDemo } from '../../../test/demo';
|
||||
|
||||
snapshotDemo(Demo);
|
||||
59
src-next/circle/test/index.spec.js
Normal file
59
src-next/circle/test/index.spec.js
Normal file
@ -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();
|
||||
});
|
||||
@ -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;
|
||||
|
||||
@ -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',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user