st-common-ui-vue3
Version:
小尾巴通用 Vue3 UI 组件库
59 lines (58 loc) • 2.6 kB
JavaScript
import { defineComponent as E, openBlock as I, createElementBlock as P, normalizeStyle as _, unref as i, createVNode as S, withCtx as w, renderSlot as H } from "vue";
import x from "../StCapturePointerContainer/StCapturePointerContainer.vue.js";
/* empty css */
import * as s from "../../node_modules/.pnpm/st-common-ui-utils@0.1.1/node_modules/st-common-ui-utils/es/utils/el-size-util.js";
import { randomInt_0_n as o, randomInt_n_m as d } from "../../node_modules/.pnpm/st-common-core@0.1.1/node_modules/st-common-core/es/num/utils/random-num-util.js";
const M = /* @__PURE__ */ E({
name: "StMoveParticleTailContainer",
__name: "StMoveParticleTailContainer",
props: {
width: { default: "100%" },
height: { default: "100%" },
particleCount: { default: 10 },
particleClass: { default: "" },
offsetInitial: { default: 20 },
offsetEnd: { default: 200 },
setParticleStyleHandler: { type: Function, default: () => {
} },
particleZIndex: { default: "initial" },
speed: { default: 1e3 },
click: { type: Boolean, default: !1 },
move: { type: Boolean, default: !0 }
},
setup(f) {
const e = f, p = (n, a, c, r) => {
for (let l = 0; l < e.particleCount; l++) {
const t = document.createElement("i");
t.classList.add("st-move-particle-tail-container__particle"), e.particleClass && t.classList.add(e.particleClass);
const m = o(e.offsetInitial), u = o(e.offsetInitial);
t.style.left = n + m + "px", t.style.top = a + u + "px";
const y = r.movementX, v = r.movementY, h = y > 0 ? d(-1 * e.offsetEnd, 0) : o(e.offsetEnd), C = v > 0 ? d(-1 * e.offsetEnd, 0) : o(e.offsetEnd);
t.style.setProperty("--end-x", n + h + "px"), t.style.setProperty("--end-y", a + C + "px"), e.setParticleStyleHandler(t, l), t.style.zIndex = e.particleZIndex + "", t.style.animationDuration = e.speed + "ms", c.appendChild(t), setTimeout(() => {
t.remove();
}, e.speed);
}
};
return (n, a) => (I(), P("div", {
class: "st-move-particle-tail-container",
style: _({
width: i(s).elSizePreHandler(n.width),
height: i(s).elSizePreHandler(n.height)
})
}, [
S(i(x), {
"capture-on-pointer-down": n.click,
"capture-on-pointer-move": n.move,
onHandlePointerEvent: p
}, {
default: w(() => [
H(n.$slots, "default")
]),
_: 3
}, 8, ["capture-on-pointer-down", "capture-on-pointer-move"])
], 4));
}
});
export {
M as default
};