You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.2 KiB
91 lines
2.2 KiB
"use strict";
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _utils = require("../utils");
|
|
|
|
var _createNamespace = (0, _utils.createNamespace)('progress'),
|
|
createComponent = _createNamespace[0],
|
|
bem = _createNamespace[1];
|
|
|
|
var _default = createComponent({
|
|
props: {
|
|
color: String,
|
|
inactive: Boolean,
|
|
pivotText: String,
|
|
textColor: String,
|
|
pivotColor: String,
|
|
trackColor: String,
|
|
strokeWidth: [Number, String],
|
|
percentage: {
|
|
type: [Number, String],
|
|
required: true,
|
|
validator: function validator(value) {
|
|
return value >= 0 && value <= 100;
|
|
}
|
|
},
|
|
showPivot: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
data: function data() {
|
|
return {
|
|
pivotWidth: 0,
|
|
progressWidth: 0
|
|
};
|
|
},
|
|
mounted: function mounted() {
|
|
this.resize();
|
|
},
|
|
watch: {
|
|
showPivot: 'resize',
|
|
pivotText: 'resize'
|
|
},
|
|
methods: {
|
|
// @exposed-api
|
|
resize: function resize() {
|
|
var _this = this;
|
|
|
|
this.$nextTick(function () {
|
|
_this.progressWidth = _this.$el.offsetWidth;
|
|
_this.pivotWidth = _this.$refs.pivot ? _this.$refs.pivot.offsetWidth : 0;
|
|
});
|
|
}
|
|
},
|
|
render: function render() {
|
|
var h = arguments[0];
|
|
var pivotText = this.pivotText,
|
|
percentage = this.percentage;
|
|
var text = pivotText != null ? pivotText : percentage + '%';
|
|
var showPivot = this.showPivot && text;
|
|
var background = this.inactive ? '#cacaca' : this.color;
|
|
var pivotStyle = {
|
|
color: this.textColor,
|
|
left: (this.progressWidth - this.pivotWidth) * percentage / 100 + "px",
|
|
background: this.pivotColor || background
|
|
};
|
|
var portionStyle = {
|
|
background: background,
|
|
width: this.progressWidth * percentage / 100 + 'px'
|
|
};
|
|
var wrapperStyle = {
|
|
background: this.trackColor,
|
|
height: (0, _utils.addUnit)(this.strokeWidth)
|
|
};
|
|
return h("div", {
|
|
"class": bem(),
|
|
"style": wrapperStyle
|
|
}, [h("span", {
|
|
"class": bem('portion'),
|
|
"style": portionStyle
|
|
}, [showPivot && h("span", {
|
|
"ref": "pivot",
|
|
"style": pivotStyle,
|
|
"class": bem('pivot')
|
|
}, [text])])]);
|
|
}
|
|
});
|
|
|
|
exports.default = _default; |