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