mine-h5-ui/es/MeProgressBar/index.vue.js

一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍

import { defineComponent as r, openBlock as l, createElementBlock as d, normalizeStyle as t, toDisplayString as s, unref as a, createElementVNode as i, createCommentVNode as u } from "vue";
import { useCounts as h } from "./hooks.js";
const x = ["viewBox"], $ = ["d", "stroke", "stroke-width"], k = ["d", "stroke", "stroke-dasharray", "stroke-width"], w = /* @__PURE__ */ r({
  name: "MeProgressBar",
  __name: "index",
  props: {
    modelValue: {},
    type: { default: "line" },
    text: { default: "" },
    textShow: { type: Boolean, default: !0 },
    width: { default: "100px" },
    borderRadius: { default: "8px" },
    size: { default: 4 },
    textColor: { default: "" },
    activeColor: { default: "#409eff" },
    backgorund: { default: "#ccc" },
    padding: { default: "0 10px" }
  },
  setup(e) {
    const c = e, { curText: n, curPosi: o } = h(c);
    return (m, f) => (l(), d("div", {
      class: "me-progress-bar",
      style: t(`padding:${e.padding};`)
    }, [
      e.type === "line" ? (l(), d("div", {
        key: 0,
        class: "line",
        style: t(`width:${e.width};`)
      }, [
        e.textShow ? (l(), d("h3", {
          key: 0,
          class: "txt",
          style: t(`left:${e.modelValue}%;background:${e.activeColor};color:${e.textColor};`)
        }, s(a(n)), 5)) : (l(), d("span", {
          key: 1,
          class: "dot",
          style: t(`width:${e.size + 8}px;height:${e.size + 8}px;left:${e.modelValue}%;background:${e.activeColor};`)
        }, null, 4)),
        i("p", {
          class: "line",
          style: t(`height:${e.size}px; background:${e.backgorund};`)
        }, [
          i("span", {
            style: t(`background:${e.activeColor}; transform:translateX(${e.modelValue - 100}%)`)
          }, null, 4)
        ], 4)
      ], 4)) : (l(), d("div", {
        key: 1,
        class: "circle",
        style: t(`width:${e.width};height:${e.width};`)
      }, [
        (l(), d("svg", {
          viewBox: `0 0 ${a(o) * 2} ${a(o) * 2}`
        }, [
          i("path", {
            d: `M ${a(o)} ${a(o)} m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000`,
            stroke: e.backgorund,
            "stroke-width": `${10 * e.size}px`
          }, null, 8, $),
          i("path", {
            d: `M ${a(o)} ${a(o)} m 0, -500 a 500, 500 0 1, 1 0, 1000 a 500, 500 0 1, 1 0, -1000`,
            stroke: e.activeColor,
            "stroke-dasharray": `${Math.round(31.4 * e.modelValue)}px, 3140px`,
            "stroke-width": `${10 * e.size}px`
          }, null, 8, k)
        ], 8, x)),
        e.textShow ? (l(), d("div", {
          key: 0,
          class: "txt",
          style: t(`color:${e.textColor};`)
        }, s(a(n)), 5)) : u("", !0)
      ], 4))
    ], 4));
  }
});
export {
  w as default
};