[improvement] rename packages dir to src (#3659)
This commit is contained in:
neverland
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-circle
|
||||
v-model="currentRate1"
|
||||
:rate="rate"
|
||||
:speed="100"
|
||||
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')"
|
||||
type="primary"
|
||||
size="small"
|
||||
@click="add"
|
||||
/>
|
||||
<van-button
|
||||
:text="$t('decrease')"
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="reduce"
|
||||
/>
|
||||
</div>
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const format = rate => Math.min(Math.max(rate, 0), 100);
|
||||
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
title2: '样式定制'
|
||||
},
|
||||
'en-US': {
|
||||
title2: 'Custom Style'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
rate: 30,
|
||||
currentRate1: 0,
|
||||
currentRate2: 0
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
add() {
|
||||
this.rate = format(this.rate + 20);
|
||||
},
|
||||
|
||||
reduce() {
|
||||
this.rate = format(this.rate - 20);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.demo-circle {
|
||||
.van-circle {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
margin: 15px 0 0 10px;
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,76 @@
|
||||
# Circle
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Circle } from 'vant';
|
||||
|
||||
Vue.use(Circle);
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-circle
|
||||
v-model="currentRate"
|
||||
:rate="30"
|
||||
:speed="100"
|
||||
:text="text"
|
||||
/>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentRate: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
text() {
|
||||
return this.currentRate.toFixed(0) + '%'
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### Custom style
|
||||
|
||||
```html
|
||||
<van-circle
|
||||
v-model="currentRate"
|
||||
color="#07c160"
|
||||
fill="#fff"
|
||||
size="120px"
|
||||
layer-color="#ebedf0"
|
||||
:text="text"
|
||||
:rate="rate"
|
||||
:speed="100"
|
||||
:clockwise="false"
|
||||
:stroke-width="60"
|
||||
/>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|------|------|------|------|
|
||||
| v-model | Current rate | `Number` | - |
|
||||
| rate | Target rate | `Number` | `100` |
|
||||
| size | Circle size | `String` | `100px` |
|
||||
| color | Progress bar color | `String` | `#1989fa` |
|
||||
| layer-color | Layer color | `String` | `#fff` |
|
||||
| fill | Fill color | `String` | `none` |
|
||||
| speed | Animate speed（rate/s）| `Number` | - |
|
||||
| text | Text | `String` | - |
|
||||
| stroke-width | Stroke width | `Number` | `40` |
|
||||
| clockwise | Is clockwise | `Boolean` | `true` |
|
||||
|
||||
### Slots
|
||||
|
||||
| Name | Description |
|
||||
|------|------|
|
||||
| default | custom text content |
|
||||
@@ -0,0 +1,117 @@
|
||||
import { createNamespace } from '../utils';
|
||||
import { raf, cancelRaf } from '../utils/dom/raf';
|
||||
import { BLUE, WHITE } from '../utils/color';
|
||||
|
||||
const [createComponent, bem] = createNamespace('circle');
|
||||
const PERIMETER = 3140;
|
||||
const PATH = 'M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0';
|
||||
|
||||
function format(rate) {
|
||||
return Math.min(Math.max(rate, 0), 100);
|
||||
}
|
||||
|
||||
export default createComponent({
|
||||
props: {
|
||||
text: String,
|
||||
value: Number,
|
||||
speed: Number,
|
||||
size: {
|
||||
type: String,
|
||||
default: '100px'
|
||||
},
|
||||
fill: {
|
||||
type: String,
|
||||
default: 'none'
|
||||
},
|
||||
rate: {
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
layerColor: {
|
||||
type: String,
|
||||
default: WHITE
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: BLUE
|
||||
},
|
||||
strokeWidth: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
clockwise: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
style() {
|
||||
return {
|
||||
width: this.size,
|
||||
height: this.size
|
||||
};
|
||||
},
|
||||
|
||||
layerStyle() {
|
||||
let offset = (PERIMETER * (100 - this.value)) / 100;
|
||||
offset = this.clockwise ? offset : PERIMETER * 2 - offset;
|
||||
return {
|
||||
stroke: `${this.color}`,
|
||||
strokeDashoffset: `${offset}px`,
|
||||
strokeWidth: `${this.strokeWidth + 1}px`
|
||||
};
|
||||
},
|
||||
|
||||
hoverStyle() {
|
||||
return {
|
||||
fill: `${this.fill}`,
|
||||
stroke: `${this.layerColor}`,
|
||||
strokeWidth: `${this.strokeWidth}px`
|
||||
};
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
rate: {
|
||||
handler() {
|
||||
this.startTime = Date.now();
|
||||
this.startRate = this.value;
|
||||
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);
|
||||
} else {
|
||||
this.$emit('input', 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('input', format(parseFloat(rate.toFixed(1))));
|
||||
if (this.increase ? rate < this.endRate : rate > this.endRate) {
|
||||
this.rafId = raf(this.animate);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
render(h) {
|
||||
return (
|
||||
<div class={bem()} style={this.style}>
|
||||
<svg viewBox="0 0 1060 1060">
|
||||
<path class={bem('hover')} style={this.hoverStyle} d={PATH} />
|
||||
<path class={bem('layer')} style={this.layerStyle} d={PATH} />
|
||||
</svg>
|
||||
{this.slots() || (this.text && <div class={bem('text')}>{this.text}</div>)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,35 @@
|
||||
@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 {
|
||||
transform: rotate(90deg);
|
||||
// should not use transform-origin: center
|
||||
// that will cause incorrect style in android devices
|
||||
transform-origin: 530px 530px;
|
||||
fill: none;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 3140;
|
||||
stroke-dashoffset: 3140;
|
||||
}
|
||||
|
||||
&__text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
color: @circle-text-color;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`renders demo correctly 1`] = `
|
||||
<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: none; stroke: #fff; stroke-width: 40px;"></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: #1989fa; stroke-dashoffset: 3140px; stroke-width: 41px;"></path>
|
||||
</svg>
|
||||
<div class="van-circle__text">0%</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: 3140px; stroke-width: 61px;"></path>
|
||||
</svg>
|
||||
<div class="van-circle__text">0%</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>
|
||||
`;
|
||||
@@ -0,0 +1,4 @@
|
||||
import Demo from '../demo';
|
||||
import demoTest from '../../../test/demo-test';
|
||||
|
||||
demoTest(Demo);
|
||||
@@ -0,0 +1,77 @@
|
||||
# Circle 环形进度条
|
||||
|
||||
### 引入
|
||||
``` javascript
|
||||
import { Circle } from 'vant';
|
||||
|
||||
Vue.use(Circle);
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
通过 `rate` 指定目标进度，`v-model` 代表当前进度，`speed` 控制动画速度
|
||||
|
||||
```html
|
||||
<van-circle
|
||||
v-model="currentRate"
|
||||
:rate="30"
|
||||
:speed="100"
|
||||
:text="text"
|
||||
/>
|
||||
```
|
||||
|
||||
``` javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentRate: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
text() {
|
||||
return this.currentRate.toFixed(0) + '%'
|
||||
}
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 样式定制
|
||||
|
||||
```html
|
||||
<van-circle
|
||||
v-model="currentRate"
|
||||
color="#07c160"
|
||||
fill="#fff"
|
||||
size="120px"
|
||||
layer-color="#ebedf0"
|
||||
:text="text"
|
||||
:rate="rate"
|
||||
:speed="100"
|
||||
:clockwise="false"
|
||||
:stroke-width="60"
|
||||
/>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| v-model | 当前进度 | `Number` | - | - |
|
||||
| rate | 目标进度 | `Number` | `100` | - |
|
||||
| size | 圆环直径 | `String` | `100px` | - |
|
||||
| color | 进度条颜色 | `String` | `#1989fa` | - |
|
||||
| layer-color | 轨道颜色 | `String` | `#fff` | - |
|
||||
| fill | 填充颜色 | `String` | `none` | - |
|
||||
| speed | 动画速度（单位为 rate/s）| `Number` | - | - |
|
||||
| text | 文字 | `String` | - | - |
|
||||
| stroke-width | 进度条宽度 | `Number` | `40` | - |
|
||||
| clockwise | 是否顺时针增加 | `Boolean` | `true` | - |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| default | 自定义文字内容 |
|
||||
Reference in New Issue
Block a user