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