123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183 |
- "use strict";
- exports.__esModule = true;
- exports.default = void 0;
- var _utils = require("../utils");
- var _raf = require("../utils/dom/raf");
- var _createNamespace = (0, _utils.createNamespace)('circle'),
- createComponent = _createNamespace[0],
- bem = _createNamespace[1];
- var PERIMETER = 3140;
- var uid = 0;
- function format(rate) {
- return Math.min(Math.max(rate, 0), 100);
- }
- function getPath(clockwise, viewBoxSize) {
- var sweepFlag = clockwise ? 1 : 0;
- 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";
- }
- var _default = createComponent({
- props: {
- text: String,
- size: [Number, String],
- color: [String, Object],
- layerColor: String,
- strokeLinecap: String,
- value: {
- type: Number,
- default: 0
- },
- speed: {
- type: [Number, String],
- default: 0
- },
- fill: {
- type: String,
- default: 'none'
- },
- rate: {
- type: [Number, String],
- default: 100
- },
- strokeWidth: {
- type: [Number, String],
- default: 40
- },
- clockwise: {
- type: Boolean,
- default: true
- }
- },
- beforeCreate: function beforeCreate() {
- this.uid = "van-circle-gradient-" + uid++;
- },
- computed: {
- style: function style() {
- var size = (0, _utils.addUnit)(this.size);
- return {
- width: size,
- height: size
- };
- },
- path: function path() {
- return getPath(this.clockwise, this.viewBoxSize);
- },
- viewBoxSize: function viewBoxSize() {
- return +this.strokeWidth + 1000;
- },
- layerStyle: function layerStyle() {
- return {
- fill: "" + this.fill,
- stroke: "" + this.layerColor,
- strokeWidth: this.strokeWidth + "px"
- };
- },
- hoverStyle: function hoverStyle() {
- var offset = PERIMETER * this.value / 100;
- return {
- stroke: "" + (this.gradient ? "url(#" + this.uid + ")" : this.color),
- strokeWidth: +this.strokeWidth + 1 + "px",
- strokeLinecap: this.strokeLinecap,
- strokeDasharray: offset + "px " + PERIMETER + "px"
- };
- },
- gradient: function gradient() {
- return (0, _utils.isObject)(this.color);
- },
- LinearGradient: function LinearGradient() {
- var _this = this;
- var h = this.$createElement;
- if (!this.gradient) {
- return;
- }
- var Stops = Object.keys(this.color).sort(function (a, b) {
- return parseFloat(a) - parseFloat(b);
- }).map(function (key, index) {
- return h("stop", {
- "key": index,
- "attrs": {
- "offset": key,
- "stop-color": _this.color[key]
- }
- });
- });
- return h("defs", [h("linearGradient", {
- "attrs": {
- "id": this.uid,
- "x1": "100%",
- "y1": "0%",
- "x2": "0%",
- "y2": "0%"
- }
- }, [Stops])]);
- }
- },
- watch: {
- rate: {
- handler: function handler(rate) {
- this.startTime = Date.now();
- this.startRate = this.value;
- this.endRate = format(rate);
- this.increase = this.endRate > this.startRate;
- this.duration = Math.abs((this.startRate - this.endRate) * 1000 / this.speed);
- if (this.speed) {
- (0, _raf.cancelRaf)(this.rafId);
- this.rafId = (0, _raf.raf)(this.animate);
- } else {
- this.$emit('input', this.endRate);
- }
- },
- immediate: true
- }
- },
- methods: {
- animate: function animate() {
- var now = Date.now();
- var progress = Math.min((now - this.startTime) / this.duration, 1);
- var rate = progress * (this.endRate - this.startRate) + this.startRate;
- this.$emit('input', format(parseFloat(rate.toFixed(1))));
- if (this.increase ? rate < this.endRate : rate > this.endRate) {
- this.rafId = (0, _raf.raf)(this.animate);
- }
- }
- },
- render: function render() {
- var h = arguments[0];
- return h("div", {
- "class": bem(),
- "style": this.style
- }, [h("svg", {
- "attrs": {
- "viewBox": "0 0 " + this.viewBoxSize + " " + this.viewBoxSize
- }
- }, [this.LinearGradient, h("path", {
- "class": bem('layer'),
- "style": this.layerStyle,
- "attrs": {
- "d": this.path
- }
- }), h("path", {
- "attrs": {
- "d": this.path
- },
- "class": bem('hover'),
- "style": this.hoverStyle
- })]), this.slots() || this.text && h("div", {
- "class": bem('text')
- }, [this.text])]);
- }
- });
- exports.default = _default;
|