2019-04-03 10:21:53 +08:00

69 lines
2.0 KiB
JavaScript

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var component_1 = require("../common/component");
var color_1 = require("../common/color");
component_1.VantComponent({
props: {
inactive: Boolean,
percentage: Number,
pivotText: String,
pivotColor: String,
showPivot: {
type: Boolean,
value: true
},
color: {
type: String,
value: color_1.BLUE
},
textColor: {
type: String,
value: '#fff'
}
},
data: {
pivotWidth: 0,
progressWidth: 0
},
watch: {
pivotText: 'getWidth',
showPivot: 'getWidth'
},
computed: {
portionStyle: function () {
var width = (this.data.progressWidth - this.data.pivotWidth) * this.data.percentage / 100 + 'px';
var background = this.getCurrentColor();
return "width: " + width + "; background: " + background + "; ";
},
pivotStyle: function () {
var color = this.data.textColor;
var background = this.data.pivotColor || this.getCurrentColor();
return "color: " + color + "; background: " + background;
},
text: function () {
return this.data.pivotText || this.data.percentage + '%';
}
},
mounted: function () {
this.getWidth();
},
methods: {
getCurrentColor: function () {
return this.data.inactive ? '#cacaca' : this.data.color;
},
getWidth: function () {
var _this = this;
this.getRect('.van-progress').then(function (rect) {
_this.set({
progressWidth: rect.width
});
});
this.getRect('.van-progress__pivot').then(function (rect) {
_this.set({
pivotWidth: rect.width || 0
});
});
}
}
});