@huyuchen/visual
Version:
## 组件环境
109 lines (108 loc) • 2.99 kB
JavaScript
import { useCssVars as h, ref as a, onMounted as g, openBlock as p, createElementBlock as u, createElementVNode as o, createTextVNode as m, pushScopeId as x, popScopeId as v } from "vue";
import "./HuBorderFlowSvg.vue2.js";
import w from "../_virtual/_plugin-vue_export-helper.js";
const f = (t) => (x("data-v-1e850e52"), t = t(), v(), t), _ = { class: "line-wrap" }, b = {
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
"xmlns:xlink": "http://www.w3.org/1999/xlink",
"xml:space": "preserve",
class: "circle-load-rect-svg"
}, y = /* @__PURE__ */ f(() => /* @__PURE__ */ o("defs", null, [
/* @__PURE__ */ o("linearGradient", {
id: "linear",
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}, [
/* @__PURE__ */ o("stop", {
offset: "0%",
"stop-color": "#00ccff"
}),
/* @__PURE__ */ o("stop", {
offset: "100%",
"stop-color": "#d500f9"
})
])
], -1)), k = ["points", "stroke"], B = ["points"], S = ["y"], N = /* @__PURE__ */ f(() => /* @__PURE__ */ o("tspan", {
x: "80",
dx: "0 10 20 10 30",
rotate: "30",
"font-weight": "bold"
}, "学习SVG", -1)), T = {
name: "HuBorderFlowSvg"
}, V = Object.assign(T, {
props: {
width: {
type: Number,
default: 180
},
height: {
type: Number,
default: 250
},
round: {
// 亮点圆的大小
type: Number,
default: 10
},
pathBackgroundColor: {
// 轨道背景颜色
type: String,
default: "rgba(0, 0, 0, 0.8)"
},
backgroundColor: {
// 线条颜色
type: String,
default: "#00ccff"
// "linear-gradient(#00ccff, #d500f9)",
}
},
setup(t) {
h((s) => ({
"362c4e00": t.width + "px",
"4bac0226": t.height + "px",
"473bdfd5": t.round,
"33b63006": i.value,
"7aa9ef57": d.value,
"60b0795c": t.height * 2
}));
const r = t, c = a(""), i = a(40), d = a(0);
return g(() => {
const s = Number(r.height), l = Number(r.width), e = Number(r.round), n = {
leftTop: e + "," + e,
leftBottom: e + "," + (s - e),
rightBottom: l - e + "," + (s - e),
rightTop: l - e + "," + e
};
c.value = `${n.leftTop} ${n.leftBottom} ${n.rightBottom} ${n.rightTop}`, d.value = l + s - i.value * 2;
}), (s, l) => (p(), u("div", _, [
(p(), u("svg", b, [
y,
o("polygon", {
points: c.value,
fill: "none",
class: "g-rect-path",
stroke: t.pathBackgroundColor
}, null, 8, k),
o("polygon", {
points: c.value,
fill: "none",
class: "g-rect-fill",
stroke: "url(#linear)"
}, null, 8, B),
o("text", {
x: "10",
y: t.height / 2,
fill: "#fff"
}, [
m(" 学习SVG "),
N
], 8, S)
]))
]));
}
}), G = /* @__PURE__ */ w(V, [["__scopeId", "data-v-1e850e52"]]);
export {
G as default
};