@fesjs/fes-design/es/progress/components/CircleProgress.js

fes-design for PC

import { defineComponent, createVNode } from 'vue';
import { circleProgressProps } from '../props';

var CircleProgress = defineComponent({
  props: circleProgressProps,
  setup(props, _ref) {
    let {
      slots
    } = _ref;
    // 渲染环形进度条
    const renderCircleProgress = () => {
      const radius = props.circleSize / 2; // 半径
      const strokeWidth = props.width; // 线宽
      const normalizedRadius = radius - strokeWidth / 2;
      // 2πr 周长
      const circumference = 2 * Math.PI * normalizedRadius;
      const strokeDashoffset = circumference - props.percent / 100 * circumference; // 线的偏移量
      return createVNode("svg", {
        "height": radius * 2,
        "width": radius * 2,
        "class": "circle-progress"
      }, [createVNode("circle", {
        "class": "background",
        "stroke-width": strokeWidth,
        "r": normalizedRadius,
        "cx": radius,
        "cy": radius
      }, null), createVNode("circle", {
        "class": "progress",
        "stroke-width": strokeWidth,
        "stroke-dasharray": `${circumference} ${circumference}`,
        "style": {
          strokeDashoffset,
          stroke: props.color
        },
        "r": normalizedRadius,
        "cx": radius,
        "cy": radius
      }, null), props.showCircleText && (slots.text ? createVNode("foreignObject", {
        "x": "0",
        "y": "0",
        "width": radius * 2,
        "height": radius * 2
      }, [createVNode("div", {
        "class": "slot-content"
      }, [slots.text()])]) : createVNode("text", {
        "x": "50%",
        "y": "50%",
        "class": "progress-text"
      }, [`${props.percent}%`]))]);
    };
    return () => renderCircleProgress();
  }
});

export { CircleProgress as default };