blackteay/vant-weapp
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant-weapp.git synced 2025-08-29 12:23:21 +08:00
Code Issues Projects Releases Wiki Activity

feat(Canvas): add type props (#2906)

Browse Source
This commit is contained in:
Lindy 2020-03-26 11:31:59 +08:00 committed by GitHub
parent dbe94b3bfa
commit b108eaf210
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/circle/README.md
View File

@ -89,6 +89,7 @@ Page({
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
| ------------ | -------------------------------------- | ------------------ | --------- | ---- | | ------------ | -------------------------------------- | ------------------ | --------- | ---- |
| value | 目标进度 | *number* | `0` | - | | value | 目标进度 | *number* | `0` | - |
| type | 指定 canvas 类型，可选值为 `2d` `webgl` | *string* | - | - |
| size | 圆环直径，默认单位为 `px` | *number* | `100` | - | | size | 圆环直径，默认单位为 `px` | *number* | `100` | - |
| color | 进度条颜色，传入对象格式可以定义渐变色 | *string \| object* | `#1989fa` | - | | color | 进度条颜色，传入对象格式可以定义渐变色 | *string \| object* | `#1989fa` | - |
| layer-color | 轨道颜色 | *string* | `#fff` | - | | layer-color | 轨道颜色 | *string* | `#fff` | - |

13
packages/circle/index.ts
View File

@ -39,6 +39,10 @@ VantComponent({
value: BLUE, value: BLUE,
observer: 'setHoverColor' observer: 'setHoverColor'
}, },
type: {
type: String,
value: ''
},
strokeWidth: { strokeWidth: {
type: Number, type: Number,
value: 4 value: 4
@ -62,8 +66,9 @@ VantComponent({
}, },
setHoverColor() { setHoverColor() {
const context = this.getContext(); const { color, size, type } = this.data;
const { color, size } = this.data; const context = type ? this.getContext(type) : this.getContext();
let hoverColor = color; let hoverColor = color;
if (isObj(color)) { if (isObj(color)) {
@ -111,8 +116,8 @@ VantComponent({
}, },
drawCircle(currentValue) { drawCircle(currentValue) {
const context = this.getContext(); const { size, type } = this.data;
const { size } = this.data; const context = type ? this.getContext(type) : this.getContext();
context.clearRect(0, 0, size, size); context.clearRect(0, 0, size, size);
this.renderLayerCircle(context); this.renderLayerCircle(context);