12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 |
- "use strict";
- exports.__esModule = true;
- exports.default = void 0;
- var _utils = require("../utils");
- var _bindEvent = require("../mixins/bind-event");
- var _createNamespace = (0, _utils.createNamespace)('progress'),
- createComponent = _createNamespace[0],
- bem = _createNamespace[1];
- var _default = createComponent({
- mixins: [(0, _bindEvent.BindEventMixin)(function (bind) {
- bind(window, 'resize', this.resize, true);
- bind(window, 'orientationchange', this.resize, true);
- })],
- 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;
|