index.js 2.1 KB

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