alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[new feature] add Circle component (#608)

Browse Source
This commit is contained in:
neverland
2018-02-05 17:52:43 +08:00
committed by GitHub
parent 70ce3838a2
commit 41df4b4819
12 changed files with 460 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/demos/common.js
+4
View File
@@ -31,6 +31,8 @@ Vue.component('demo-section', DemoSection);
Locale.add({
'zh-CN': {
add: '增加',
decrease: '减少',
red: '红色',
orange: '橙色',
yellow: '黄色',
@@ -56,6 +58,8 @@ Locale.add({
passwordPlaceholder: '请输入密码'
},
'en-US': {
add: 'Add',
decrease: 'Decrease',
red: 'Red',
orange: 'Orange',
yellow: 'Yellow',
docs/demos/index.js
+1
View File
@@ -31,6 +31,7 @@ export default {
'cell-swipe': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/cell-swipe'), 'cell-swipe')), 'cell-swipe')),
'cell': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/cell'), 'cell')), 'cell')),
'checkbox': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/checkbox'), 'checkbox')), 'checkbox')),
'circle': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/circle'), 'circle')), 'circle')),
'contact': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/contact'), 'contact')), 'contact')),
'coupon': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/coupon'), 'coupon')), 'coupon')),
'datetime-picker': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/datetime-picker'), 'datetime-picker')), 'datetime-picker')),
docs/demos/views/circle.vue
+78
View File
@@ -0,0 +1,78 @@
<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="#13ce66"
fill="#fff"
:rate="rate"
size="120px"
layer-color="#eee"
: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="postcss">
.demo-circle {
.van-circle {
margin-left: 15px;
}
.van-button {
margin: 15px 0 0 10px;
&:first-of-type {
margin-left: 15px;
}
}
}
</style>
docs/markdown/en-US/circle.md
+69
View File
@@ -0,0 +1,69 @@
## 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="#13ce66"
fill="#fff"
size="120px"
layer-color="#eee"
:text="text"
:rate="rate"
:speed="100"
:clockwise="false"
:stroke-width="60"
/>
```
### API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| v-model | Current rate | `Number` | - | - |
| rate | Target rate | `Number` | `100` | - |
| size | Circle size | `String` | `100px` | - |
| color | Progress bar color | `String` | `#38f` | - |
| 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` | - |
docs/markdown/index.js
+2
View File
@@ -25,6 +25,7 @@ export default {
'zh-CN/changelog-generated': wrapper(r => require.ensure([], () => r(require('./zh-CN/changelog-generated.md')), 'zh-CN/changelog-generated')),
'zh-CN/changelog': wrapper(r => require.ensure([], () => r(require('./zh-CN/changelog.md')), 'zh-CN/changelog')),
'zh-CN/checkbox': wrapper(r => require.ensure([], () => r(require('./zh-CN/checkbox.md')), 'zh-CN/checkbox')),
'zh-CN/circle': wrapper(r => require.ensure([], () => r(require('./zh-CN/circle.md')), 'zh-CN/circle')),
'zh-CN/contact': wrapper(r => require.ensure([], () => r(require('./zh-CN/contact.md')), 'zh-CN/contact')),
'zh-CN/coupon': wrapper(r => require.ensure([], () => r(require('./zh-CN/coupon.md')), 'zh-CN/coupon')),
'zh-CN/datetime-picker': wrapper(r => require.ensure([], () => r(require('./zh-CN/datetime-picker.md')), 'zh-CN/datetime-picker')),
@@ -77,6 +78,7 @@ export default {
'en-US/cell': wrapper(r => require.ensure([], () => r(require('./en-US/cell.md')), 'en-US/cell')),
'en-US/changelog': wrapper(r => require.ensure([], () => r(require('./en-US/changelog.md')), 'en-US/changelog')),
'en-US/checkbox': wrapper(r => require.ensure([], () => r(require('./en-US/checkbox.md')), 'en-US/checkbox')),
'en-US/circle': wrapper(r => require.ensure([], () => r(require('./en-US/circle.md')), 'en-US/circle')),
'en-US/contact': wrapper(r => require.ensure([], () => r(require('./en-US/contact.md')), 'en-US/contact')),
'en-US/coupon': wrapper(r => require.ensure([], () => r(require('./en-US/coupon.md')), 'en-US/coupon')),
'en-US/datetime-picker': wrapper(r => require.ensure([], () => r(require('./en-US/datetime-picker.md')), 'en-US/datetime-picker')),
docs/markdown/zh-CN/circle.md
+70
View File
@@ -0,0 +1,70 @@
## 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="#13ce66"
fill="#fff"
size="120px"
layer-color="#eee"
:text="text"
:rate="rate"
:speed="100"
:clockwise="false"
:stroke-width="60"
/>
```
### API
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|-----------|-----------|-----------|-------------|-------------|
| v-model | 当前进度 | `Number` | - | - |
| rate | 目标进度 | `Number` | `100` | - |
| size | 圆环直径 | `String` | `100px` | - |
| color | 进度条颜色 | `String` | `#38f` | - |
| layer-color | 轨道颜色 | `String` | `#fff` | - |
| fill | 填充颜色 | `String` | `none` | - |
| speed | 动画速度（单位为 rate/s）| `Number` | - | - |
| text | 文字 | `String` | - | - |
| stroke-width | 进度条宽度 | `Number` | `40` | - |
| clockwise | 是否顺时针增加 | `Boolean` | `true` | - |
docs/src/doc.config.js
+8
View File
@@ -80,6 +80,10 @@ module.exports = {
path: '/cell',
title: 'Cell - 单元格'
},
{
path: '/circle',
title: 'Circle - 环形进度条'
},
{
path: '/icon',
title: 'Icon - 图标'
@@ -358,6 +362,10 @@ module.exports = {
path: '/cell',
title: 'Cell'
},
{
path: '/circle',
title: 'Circle'
},
{
path: '/icon',
title: 'Icon'