st-common-ui-vue3
Version:
小尾巴通用 Vue3 UI 组件库
2 lines (1 loc) • 2.09 kB
JavaScript
"use strict";const n=require("vue"),_=require("../StCapturePointerContainer/StCapturePointerContainer.vue.js");;/* empty css */const r=require("../../node_modules/.pnpm/st-common-ui-utils@0.1.1/node_modules/st-common-ui-utils/es/utils/el-size-util.js"),i=require("../../node_modules/.pnpm/st-common-core@0.1.1/node_modules/st-common-core/es/num/utils/random-num-util.js"),y=n.defineComponent({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,l,d)=>{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 f=i.randomInt_n_m(-1*e.offsetInitial,e.offsetInitial),p=i.randomInt_n_m(-1*e.offsetInitial,e.offsetInitial);t.style.left=o+f+"px",t.style.top=l+p+"px";const u=i.randomInt_n_m(-1*e.offsetEnd,e.offsetEnd),m=i.randomInt_n_m(-1*e.offsetEnd,e.offsetEnd);t.style.setProperty("--end-x",o+u+"px"),t.style.setProperty("--end-y",l+m+"px"),e.setParticleStyleHandler(t,a),t.style.zIndex=e.particleZIndex+"",t.style.animationDuration=e.speed+"ms",d.appendChild(t),setTimeout(()=>{t.remove()},e.speed)}};return(o,l)=>(n.openBlock(),n.createElementBlock("div",{class:"st-click-particle-bomb-container",style:n.normalizeStyle({width:n.unref(r).elSizePreHandler(o.width),height:n.unref(r).elSizePreHandler(o.height)})},[n.createVNode(n.unref(_),{"capture-on-pointer-down":o.clickParticleBomb,"capture-on-pointer-move":o.moveParticleBomb,onHandlePointerEvent:c},{default:n.withCtx(()=>[n.renderSlot(o.$slots,"default")]),_:3},8,["capture-on-pointer-down","capture-on-pointer-move"])],4))}});module.exports=y;