index.js
1.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import { VantComponent } from '../common/component';
VantComponent({
props: {
inactive: Boolean,
percentage: Number,
pivotText: String,
pivotColor: String,
showPivot: {
type: Boolean,
value: true
},
color: {
type: String,
value: '#38f'
},
textColor: {
type: String,
value: '#fff'
}
},
data: {
pivotWidth: 0,
progressWidth: 0
},
watch: {
pivotText: 'getWidth',
showPivot: 'getWidth'
},
computed: {
portionStyle: function portionStyle() {
var width = (this.data.progressWidth - this.data.pivotWidth) * this.data.percentage / 100 + 'px';
var background = this.getCurrentColor();
return "width: " + width + "; background: " + background + "; ";
},
pivotStyle: function pivotStyle() {
var color = this.data.textColor;
var background = this.data.pivotColor || this.getCurrentColor();
return "color: " + color + "; background: " + background;
},
text: function text() {
return this.data.pivotText || this.data.percentage + '%';
}
},
mounted: function mounted() {
this.getWidth();
},
methods: {
getCurrentColor: function getCurrentColor() {
return this.data.inactive ? '#cacaca' : this.data.color;
},
getWidth: function getWidth() {
var _this = this;
this.getRect('.van-progress').then(function (rect) {
_this.setData({
progressWidth: rect.width
});
});
this.getRect('.van-progress__pivot').then(function (rect) {
_this.setData({
pivotWidth: rect.width || 0
});
});
}
}
});