index.js 2.3 KB

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