@ued_fpi/data-visual
Version:
<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />
114 lines (111 loc) • 3.72 kB
JavaScript
import { defineComponent, ref, watchEffect, openBlock, createElementBlock, createElementVNode, unref, createCommentVNode } from 'vue';
const _hoisted_1 = {
viewBox: "0 0 100 100",
class: "progress-bar"
};
const _hoisted_2 = {
id: "grad1",
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
};
const _hoisted_3 = /* @__PURE__ */ createElementVNode("stop", {
class: "grad1-stop1",
offset: "0%"
}, null, -1);
const _hoisted_4 = ["offset", "stop-opacity"];
const _hoisted_5 = {
id: "grad2",
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
};
const _hoisted_6 = ["stop-opacity"];
const _hoisted_7 = ["offset"];
const _hoisted_8 = ["stroke-dasharray"];
const _hoisted_9 = ["stroke-dasharray"];
const pie = 3.141592653;
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "ProgressBar",
props: {
rate: { default: 0 }
},
setup(__props) {
const props = __props;
const r = ref(45);
const perimeter = r.value * pie * 2;
const leftPathShow = ref(false);
const leftDasharray = ref("");
const leftOffset = ref("0%");
const leftColorOPacity = ref(0);
const rightPathShow = ref(false);
const rightDasharray = ref("");
const rightOffset = ref("0%");
watchEffect(() => {
if (props.rate === 0) {
leftPathShow.value = false;
rightPathShow.value = false;
} else if (props.rate <= 0.5) {
leftPathShow.value = true;
rightPathShow.value = false;
leftDasharray.value = `${perimeter * props.rate} ${perimeter * (0.5 - props.rate)}`;
leftOffset.value = `${props.rate * 200}%`;
leftColorOPacity.value = 1;
} else {
leftPathShow.value = true;
rightPathShow.value = true;
leftDasharray.value = `${perimeter} 0`;
leftOffset.value = "100%";
const rightRate = props.rate - 0.5;
rightDasharray.value = `${perimeter * rightRate} ${perimeter * (0.5 - rightRate)} `;
rightOffset.value = `${rightRate * 200}%`;
leftColorOPacity.value = 0.5 / props.rate;
}
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("svg", _hoisted_1, [
createElementVNode("defs", null, [
createElementVNode("linearGradient", _hoisted_2, [
_hoisted_3,
createElementVNode("stop", {
class: "grad1-stop2",
offset: unref(leftOffset),
"stop-opacity": unref(leftColorOPacity)
}, null, 8, _hoisted_4)
]),
createElementVNode("linearGradient", _hoisted_5, [
createElementVNode("stop", {
class: "grad2-stop1",
offset: "0%",
"stop-opacity": unref(leftColorOPacity)
}, null, 8, _hoisted_6),
createElementVNode("stop", {
class: "grad2-stop2",
offset: unref(rightOffset)
}, null, 8, _hoisted_7)
])
]),
unref(leftPathShow) ? (openBlock(), createElementBlock("path", {
key: 0,
d: "M50,55 m0,-48, a43,43,0,1,0,0,86",
fill: "none",
stroke: "url(#grad1)",
"stroke-width": "6",
"stroke-dasharray": unref(leftDasharray)
}, null, 8, _hoisted_8)) : createCommentVNode("", true),
unref(rightPathShow) ? (openBlock(), createElementBlock("path", {
key: 1,
d: "M50,55 m0,-48, a43,43,0,1,0,0,86",
fill: "none",
stroke: "url(#grad2)",
"stroke-width": "6",
"stroke-dasharray": unref(rightDasharray),
transform: "rotate(180 50,50)"
}, null, 8, _hoisted_9)) : createCommentVNode("", true)
]);
};
}
});
export { _sfc_main as default };