index.js 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. "use strict";
  2. exports.__esModule = true;
  3. exports.default = void 0;
  4. var _utils = require("../utils");
  5. var _bindEvent = require("../mixins/bind-event");
  6. var _createNamespace = (0, _utils.createNamespace)('progress'),
  7. createComponent = _createNamespace[0],
  8. bem = _createNamespace[1];
  9. var _default = createComponent({
  10. mixins: [(0, _bindEvent.BindEventMixin)(function (bind) {
  11. bind(window, 'resize', this.resize, true);
  12. bind(window, 'orientationchange', this.resize, true);
  13. })],
  14. props: {
  15. color: String,
  16. inactive: Boolean,
  17. pivotText: String,
  18. textColor: String,
  19. pivotColor: String,
  20. trackColor: String,
  21. strokeWidth: [Number, String],
  22. percentage: {
  23. type: [Number, String],
  24. required: true,
  25. validator: function validator(value) {
  26. return value >= 0 && value <= 100;
  27. }
  28. },
  29. showPivot: {
  30. type: Boolean,
  31. default: true
  32. }
  33. },
  34. data: function data() {
  35. return {
  36. pivotWidth: 0,
  37. progressWidth: 0
  38. };
  39. },
  40. mounted: function mounted() {
  41. this.resize();
  42. },
  43. watch: {
  44. showPivot: 'resize',
  45. pivotText: 'resize'
  46. },
  47. methods: {
  48. // @exposed-api
  49. resize: function resize() {
  50. var _this = this;
  51. this.$nextTick(function () {
  52. _this.progressWidth = _this.$el.offsetWidth;
  53. _this.pivotWidth = _this.$refs.pivot ? _this.$refs.pivot.offsetWidth : 0;
  54. });
  55. }
  56. },
  57. render: function render() {
  58. var h = arguments[0];
  59. var pivotText = this.pivotText,
  60. percentage = this.percentage;
  61. var text = pivotText != null ? pivotText : percentage + '%';
  62. var showPivot = this.showPivot && text;
  63. var background = this.inactive ? '#cacaca' : this.color;
  64. var pivotStyle = {
  65. color: this.textColor,
  66. left: (this.progressWidth - this.pivotWidth) * percentage / 100 + "px",
  67. background: this.pivotColor || background
  68. };
  69. var portionStyle = {
  70. background: background,
  71. width: this.progressWidth * percentage / 100 + 'px'
  72. };
  73. var wrapperStyle = {
  74. background: this.trackColor,
  75. height: (0, _utils.addUnit)(this.strokeWidth)
  76. };
  77. return h("div", {
  78. "class": bem(),
  79. "style": wrapperStyle
  80. }, [h("span", {
  81. "class": bem('portion'),
  82. "style": portionStyle
  83. }, [showPivot && h("span", {
  84. "ref": "pivot",
  85. "style": pivotStyle,
  86. "class": bem('pivot')
  87. }, [text])])]);
  88. }
  89. });
  90. exports.default = _default;