index.js 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  1. "use strict";
  2. exports.__esModule = true;
  3. exports.default = void 0;
  4. var _utils = require("../utils");
  5. var _raf = require("../utils/dom/raf");
  6. var _createNamespace = (0, _utils.createNamespace)('circle'),
  7. createComponent = _createNamespace[0],
  8. bem = _createNamespace[1];
  9. var PERIMETER = 3140;
  10. var uid = 0;
  11. function format(rate) {
  12. return Math.min(Math.max(rate, 0), 100);
  13. }
  14. function getPath(clockwise, viewBoxSize) {
  15. var sweepFlag = clockwise ? 1 : 0;
  16. return "M " + viewBoxSize / 2 + " " + viewBoxSize / 2 + " m 0, -500 a 500, 500 0 1, " + sweepFlag + " 0, 1000 a 500, 500 0 1, " + sweepFlag + " 0, -1000";
  17. }
  18. var _default = createComponent({
  19. props: {
  20. text: String,
  21. size: [Number, String],
  22. color: [String, Object],
  23. layerColor: String,
  24. strokeLinecap: String,
  25. value: {
  26. type: Number,
  27. default: 0
  28. },
  29. speed: {
  30. type: [Number, String],
  31. default: 0
  32. },
  33. fill: {
  34. type: String,
  35. default: 'none'
  36. },
  37. rate: {
  38. type: [Number, String],
  39. default: 100
  40. },
  41. strokeWidth: {
  42. type: [Number, String],
  43. default: 40
  44. },
  45. clockwise: {
  46. type: Boolean,
  47. default: true
  48. }
  49. },
  50. beforeCreate: function beforeCreate() {
  51. this.uid = "van-circle-gradient-" + uid++;
  52. },
  53. computed: {
  54. style: function style() {
  55. var size = (0, _utils.addUnit)(this.size);
  56. return {
  57. width: size,
  58. height: size
  59. };
  60. },
  61. path: function path() {
  62. return getPath(this.clockwise, this.viewBoxSize);
  63. },
  64. viewBoxSize: function viewBoxSize() {
  65. return +this.strokeWidth + 1000;
  66. },
  67. layerStyle: function layerStyle() {
  68. return {
  69. fill: "" + this.fill,
  70. stroke: "" + this.layerColor,
  71. strokeWidth: this.strokeWidth + "px"
  72. };
  73. },
  74. hoverStyle: function hoverStyle() {
  75. var offset = PERIMETER * this.value / 100;
  76. return {
  77. stroke: "" + (this.gradient ? "url(#" + this.uid + ")" : this.color),
  78. strokeWidth: +this.strokeWidth + 1 + "px",
  79. strokeLinecap: this.strokeLinecap,
  80. strokeDasharray: offset + "px " + PERIMETER + "px"
  81. };
  82. },
  83. gradient: function gradient() {
  84. return (0, _utils.isObject)(this.color);
  85. },
  86. LinearGradient: function LinearGradient() {
  87. var _this = this;
  88. var h = this.$createElement;
  89. if (!this.gradient) {
  90. return;
  91. }
  92. var Stops = Object.keys(this.color).sort(function (a, b) {
  93. return parseFloat(a) - parseFloat(b);
  94. }).map(function (key, index) {
  95. return h("stop", {
  96. "key": index,
  97. "attrs": {
  98. "offset": key,
  99. "stop-color": _this.color[key]
  100. }
  101. });
  102. });
  103. return h("defs", [h("linearGradient", {
  104. "attrs": {
  105. "id": this.uid,
  106. "x1": "100%",
  107. "y1": "0%",
  108. "x2": "0%",
  109. "y2": "0%"
  110. }
  111. }, [Stops])]);
  112. }
  113. },
  114. watch: {
  115. rate: {
  116. handler: function handler(rate) {
  117. this.startTime = Date.now();
  118. this.startRate = this.value;
  119. this.endRate = format(rate);
  120. this.increase = this.endRate > this.startRate;
  121. this.duration = Math.abs((this.startRate - this.endRate) * 1000 / this.speed);
  122. if (this.speed) {
  123. (0, _raf.cancelRaf)(this.rafId);
  124. this.rafId = (0, _raf.raf)(this.animate);
  125. } else {
  126. this.$emit('input', this.endRate);
  127. }
  128. },
  129. immediate: true
  130. }
  131. },
  132. methods: {
  133. animate: function animate() {
  134. var now = Date.now();
  135. var progress = Math.min((now - this.startTime) / this.duration, 1);
  136. var rate = progress * (this.endRate - this.startRate) + this.startRate;
  137. this.$emit('input', format(parseFloat(rate.toFixed(1))));
  138. if (this.increase ? rate < this.endRate : rate > this.endRate) {
  139. this.rafId = (0, _raf.raf)(this.animate);
  140. }
  141. }
  142. },
  143. render: function render() {
  144. var h = arguments[0];
  145. return h("div", {
  146. "class": bem(),
  147. "style": this.style
  148. }, [h("svg", {
  149. "attrs": {
  150. "viewBox": "0 0 " + this.viewBoxSize + " " + this.viewBoxSize
  151. }
  152. }, [this.LinearGradient, h("path", {
  153. "class": bem('layer'),
  154. "style": this.layerStyle,
  155. "attrs": {
  156. "d": this.path
  157. }
  158. }), h("path", {
  159. "attrs": {
  160. "d": this.path
  161. },
  162. "class": bem('hover'),
  163. "style": this.hoverStyle
  164. })]), this.slots() || this.text && h("div", {
  165. "class": bem('text')
  166. }, [this.text])]);
  167. }
  168. });
  169. exports.default = _default;