index.js 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = void 0;
  4. var _utils = require("../utils");
  5. var _raf = require("../utils/raf");
  6. var _color = require("../utils/color");
  7. var _use = (0, _utils.use)('circle'),
  8. sfc = _use[0],
  9. bem = _use[1];
  10. var PERIMETER = 3140;
  11. var PATH = 'M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0';
  12. function format(rate) {
  13. return Math.min(Math.max(rate, 0), 100);
  14. }
  15. var _default = sfc({
  16. props: {
  17. text: String,
  18. value: Number,
  19. speed: Number,
  20. size: {
  21. type: String,
  22. "default": '100px'
  23. },
  24. fill: {
  25. type: String,
  26. "default": 'none'
  27. },
  28. rate: {
  29. type: Number,
  30. "default": 100
  31. },
  32. layerColor: {
  33. type: String,
  34. "default": _color.WHITE
  35. },
  36. color: {
  37. type: String,
  38. "default": _color.BLUE
  39. },
  40. strokeWidth: {
  41. type: Number,
  42. "default": 40
  43. },
  44. clockwise: {
  45. type: Boolean,
  46. "default": true
  47. }
  48. },
  49. computed: {
  50. style: function style() {
  51. return {
  52. width: this.size,
  53. height: this.size
  54. };
  55. },
  56. layerStyle: function layerStyle() {
  57. var offset = PERIMETER * (100 - this.value) / 100;
  58. offset = this.clockwise ? offset : PERIMETER * 2 - offset;
  59. return {
  60. stroke: "" + this.color,
  61. strokeDashoffset: offset + "px",
  62. strokeWidth: this.strokeWidth + 1 + "px"
  63. };
  64. },
  65. hoverStyle: function hoverStyle() {
  66. return {
  67. fill: "" + this.fill,
  68. stroke: "" + this.layerColor,
  69. strokeWidth: this.strokeWidth + "px"
  70. };
  71. }
  72. },
  73. watch: {
  74. rate: {
  75. handler: function handler() {
  76. this.startTime = Date.now();
  77. this.startRate = this.value;
  78. this.endRate = format(this.rate);
  79. this.increase = this.endRate > this.startRate;
  80. this.duration = Math.abs((this.startRate - this.endRate) * 1000 / this.speed);
  81. if (this.speed) {
  82. (0, _raf.cancel)(this.rafId);
  83. this.rafId = (0, _raf.raf)(this.animate);
  84. } else {
  85. this.$emit('input', this.endRate);
  86. }
  87. },
  88. immediate: true
  89. }
  90. },
  91. methods: {
  92. animate: function animate() {
  93. var now = Date.now();
  94. var progress = Math.min((now - this.startTime) / this.duration, 1);
  95. var rate = progress * (this.endRate - this.startRate) + this.startRate;
  96. this.$emit('input', format(parseFloat(rate.toFixed(1))));
  97. if (this.increase ? rate < this.endRate : rate > this.endRate) {
  98. this.rafId = (0, _raf.raf)(this.animate);
  99. }
  100. }
  101. },
  102. render: function render(h) {
  103. return h("div", {
  104. "class": bem(),
  105. "style": this.style
  106. }, [h("svg", {
  107. "attrs": {
  108. "viewBox": "0 0 1060 1060"
  109. }
  110. }, [h("path", {
  111. "class": bem('hover'),
  112. "style": this.hoverStyle,
  113. "attrs": {
  114. "d": PATH
  115. }
  116. }), h("path", {
  117. "class": bem('layer'),
  118. "style": this.layerStyle,
  119. "attrs": {
  120. "d": PATH
  121. }
  122. })]), this.slots() || this.text && h("div", {
  123. "class": bem('text')
  124. }, [this.text])]);
  125. }
  126. });
  127. exports["default"] = _default;