@cqmcui/cqmcui/dist/packages/_es/CircleProgress.js

轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）

import { useSlots, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, Fragment, renderList, renderSlot, toDisplayString, createCommentVNode } from "vue";
import { g as isObject, c as createComponent } from "./component-81a4c1d0.js";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const { componentName, create } = createComponent("circle-progress");
const _sfc_main = create({
  props: {
    progress: {
      type: [Number, String],
      required: true
    },
    strokeWidth: {
      type: [Number, String],
      default: 5
    },
    radius: {
      type: [Number, String],
      default: 50
    },
    strokeLinecap: {
      type: String,
      default: "round"
    },
    color: {
      type: [String, Object],
      default: ""
    },
    pathColor: {
      type: String,
      default: ""
    },
    clockwise: {
      type: Boolean,
      default: true
    }
  },
  setup(props) {
    const slotDefault = !!useSlots().default;
    const refRandomId = Math.random().toString(36).slice(-8);
    const classes = computed(() => {
      const prefixCls = componentName;
      return {
        [prefixCls]: true
      };
    });
    const path = computed(() => {
      const isWise = props.clockwise ? 1 : 0;
      return `M 50 50 m 0 -45 a 45 45 0 1 ${isWise} 0 90 a 45 45 0 1, ${isWise} 0 -90`;
    });
    const hoverColor = computed(() => {
      return isObject(props.color) ? `url(#${refRandomId})` : props.color;
    });
    const hoverStyle = computed(() => {
      let perimeter = 283;
      let offset = perimeter * Number(props.progress) / 100;
      return {
        stroke: isObject(props.color) ? `url(#${refRandomId})` : props.color,
        strokeDasharray: `${offset}px ${perimeter}px`
      };
    });
    const pathStyle = computed(() => {
      return {
        stroke: props.pathColor
      };
    });
    const stop = computed(() => {
      if (!isObject(props.color)) {
        return;
      }
      let color = props.color;
      const colorArr = Object.keys(color).sort((a, b) => parseFloat(a) - parseFloat(b));
      let stopArr = [];
      colorArr.map((item) => {
        let obj = {
          key: "",
          value: ""
        };
        obj.key = item;
        obj.value = color[item];
        stopArr.push(obj);
      });
      return stopArr;
    });
    return {
      classes,
      hoverStyle,
      pathStyle,
      path,
      hoverColor,
      stop,
      slotDefault,
      refRandomId
    };
  }
});
const _hoisted_1 = { viewBox: "0 0 100 100" };
const _hoisted_2 = ["id"];
const _hoisted_3 = ["offset", "stop-color"];
const _hoisted_4 = ["d", "stroke-width"];
const _hoisted_5 = ["d", "stroke", "stroke-linecap", "stroke-width"];
const _hoisted_6 = { class: "cqmc-circle-progress__text" };
const _hoisted_7 = { key: 0 };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", {
    class: normalizeClass(_ctx.classes),
    style: normalizeStyle({ height: Number(_ctx.radius) * 2 + "px", width: Number(_ctx.radius) * 2 + "px" })
  }, [
    (openBlock(), createElementBlock("svg", _hoisted_1, [
      createElementVNode("defs", null, [
        createElementVNode("linearGradient", {
          id: _ctx.refRandomId,
          x1: "100%",
          y1: "0%",
          x2: "0%",
          y2: "0%"
        }, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.stop, (item, index2) => {
            return openBlock(), createElementBlock("stop", {
              key: index2,
              offset: item.key,
              "stop-color": item.value
            }, null, 8, _hoisted_3);
          }), 128))
        ], 8, _hoisted_2)
      ]),
      createElementVNode("path", {
        class: "cqmc-circle-progress__path",
        style: normalizeStyle(_ctx.pathStyle),
        d: _ctx.path,
        fill: "none",
        "stroke-width": _ctx.strokeWidth
      }, " > ", 12, _hoisted_4),
      createElementVNode("path", {
        class: "cqmc-circle-progress__hover",
        style: normalizeStyle(_ctx.hoverStyle),
        d: _ctx.path,
        fill: "none",
        stroke: _ctx.hoverColor,
        "stroke-linecap": _ctx.strokeLinecap,
        "stroke-width": _ctx.strokeWidth
      }, null, 12, _hoisted_5)
    ])),
    createElementVNode("div", _hoisted_6, [
      renderSlot(_ctx.$slots, "default"),
      !_ctx.slotDefault ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(_ctx.progress) + "%", 1)) : createCommentVNode("", true)
    ])
  ], 6);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  index as default
};