| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175 | import { createNamespace, isObject, addUnit } from '../utils';import { raf, cancelRaf } from '../utils/dom/raf';var _createNamespace = 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";}export 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 = 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 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) {          cancelRaf(this.rafId);          this.rafId = 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 = 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])]);  }});
 |