mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
feat(Progress): add stroke-width prop
This commit is contained in:
parent
545ecbb679
commit
3204b46b11
@ -2,6 +2,10 @@
|
|||||||
<van-progress custom-class="progress" percentage="50" />
|
<van-progress custom-class="progress" percentage="50" />
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="线条粗细">
|
||||||
|
<van-progress custom-class="progress" stroke-width="8" percentage="50" />
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
<demo-block title="置灰">
|
<demo-block title="置灰">
|
||||||
<van-progress custom-class="progress" inactive percentage="50" />
|
<van-progress custom-class="progress" inactive percentage="50" />
|
||||||
</demo-block>
|
</demo-block>
|
||||||
|
@ -19,6 +19,14 @@
|
|||||||
<van-progress percentage="50" />
|
<van-progress percentage="50" />
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### 线条粗细
|
||||||
|
|
||||||
|
通过`stroke-width`可以设置进度条的粗细
|
||||||
|
|
||||||
|
```html
|
||||||
|
<van-progress :percentage="50" stroke-width="8" />
|
||||||
|
```
|
||||||
|
|
||||||
### 置灰
|
### 置灰
|
||||||
|
|
||||||
```html
|
```html
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import { VantComponent } from '../common/component';
|
import { VantComponent } from '../common/component';
|
||||||
import { BLUE } from '../common/color';
|
import { BLUE } from '../common/color';
|
||||||
|
import { addUnit } from '../common/utils';
|
||||||
|
|
||||||
VantComponent({
|
VantComponent({
|
||||||
props: {
|
props: {
|
||||||
@ -18,6 +19,24 @@ VantComponent({
|
|||||||
textColor: {
|
textColor: {
|
||||||
type: String,
|
type: String,
|
||||||
value: '#fff'
|
value: '#fff'
|
||||||
|
},
|
||||||
|
strokeWidth: {
|
||||||
|
type: null,
|
||||||
|
observer: 'setStrokeWidthUnit'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
strokeWidthUnit: '4px'
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
setStrokeWidthUnit(val) {
|
||||||
|
this.setData({
|
||||||
|
strokeWidthUnit: addUnit(val)
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
<wxs src="./index.wxs" module="getters" />
|
<wxs src="./index.wxs" module="getters" />
|
||||||
|
|
||||||
<view class="van-progress custom-class">
|
<view class="van-progress custom-class" style="height: {{ strokeWidthUnit }};">
|
||||||
<view
|
<view
|
||||||
class="van-progress__portion"
|
class="van-progress__portion"
|
||||||
style="width: {{ percentage }}%; background: {{ inactive ? '#cacaca' : color }}"
|
style="width: {{ percentage }}%; background: {{ inactive ? '#cacaca' : color }}"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user