mine-h5-ui
Version:
一款轻量级、模块化基于 Vue3.x 的 H5 前端 UI 组件库 👍
84 lines (83 loc) • 2.91 kB
JavaScript
import { defineComponent as p, createElementBlock as a, openBlock as l, normalizeStyle as t, createElementVNode as r, toDisplayString as i, unref as o, createCommentVNode as h } from "vue";
import { useCounts as $ } from "./hooks.js";
/*!
* mine-h5-ui v2.15.0
* Copyright (c) 2025 biaov
* @license MIT
*/
const k = ["viewBox"], m = ["d", "stroke", "stroke-width"], f = ["d", "stroke", "stroke-dasharray", "stroke-width"], w = /* @__PURE__ */ p({
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(n) {
const u = n, { curText: d, curPosi: s } = $(u);
return (e, y) => (l(), a("div", {
class: "me-progress-bar",
style: t(`padding:${e.padding};`)
}, [
e.type === "line" ? (l(), a("div", {
key: 0,
class: "line",
style: t(`width:${e.width};`)
}, [
e.textShow ? (l(), a("h3", {
key: 0,
class: "txt",
style: t(`left:${e.modelValue}%;background:${e.activeColor};color:${e.textColor};`)
}, i(o(d)), 5)) : (l(), a("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)),
r("p", {
class: "line",
style: t(`height:${e.size}px; background:${e.backgorund};`)
}, [
r("span", {
style: t(`background:${e.activeColor}; transform:translateX(${e.modelValue - 100}%)`)
}, null, 4)
], 4)
], 4)) : (l(), a("div", {
key: 1,
class: "circle",
style: t(`width:${e.width};height:${e.width};`)
}, [
(l(), a("svg", {
viewBox: `0 0 ${o(s) * 2} ${o(s) * 2}`
}, [
r("path", {
d: `M ${o(s)} ${o(s)} 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, m),
r("path", {
d: `M ${o(s)} ${o(s)} 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, f)
], 8, k)),
e.textShow ? (l(), a("div", {
key: 0,
class: "txt",
style: t(`color:${e.textColor};`)
}, i(o(d)), 5)) : h("", !0)
], 4))
], 4));
}
});
export {
w as default
};