st-common-ui-vue3
Version:
小尾巴通用 Vue3 UI 组件库
2 lines (1 loc) • 1.99 kB
JavaScript
"use strict";const e=require("vue"),r=require("../../node_modules/.pnpm/st-common-ui-utils@0.1.1/node_modules/st-common-ui-utils/es/utils/el-size-util.js"),s=require("../StCapturePointerContainer/StCapturePointerContainer.vue.js");;/* empty css */const o=require("../../node_modules/.pnpm/st-common-core@0.1.1/node_modules/st-common-core/es/num/utils/random-num-util.js"),p=e.defineComponent({name:"StClickWaveContainer",__name:"StClickWaveContainer",props:{width:{default:"100%"},height:{default:"100%"},speed:{default:1e3},waveColor:{default:"#fff"},waveColorRandom:{type:Boolean,default:!1},waveMaxSize:{default:"100%"},waveInitialOpacity:{default:.5},waveZIndex:{default:"initial"},waveOverflowHidden:{type:Boolean,default:!0},click:{type:Boolean,default:!0},enter:{type:Boolean,default:!1},leave:{type:Boolean,default:!1}},setup(d){const t=d,u=(n,l,i)=>{const a=document.createElement("div");a.classList.add("st-click-wave-container__wave"),a.style.left=n+"px",a.style.top=l+"px",a.style.zIndex=t.waveZIndex+"",a.style.background=t.waveColorRandom?`rgb(${o.randomInt_0_n(255)}, ${o.randomInt_0_n(255)}, ${o.randomInt_0_n(255)})`:t.waveColor,a.style.animationDuration=t.speed+"ms",i.appendChild(a),setTimeout(()=>{i.removeChild(a)},t.speed)};return(n,l)=>(e.openBlock(),e.createElementBlock("div",{class:"st-click-wave-container",style:e.normalizeStyle({"--wave-max-size":e.unref(r).elSizePreHandler(t.waveMaxSize),"--wave-initial-opacity":t.waveInitialOpacity,width:e.unref(r).elSizePreHandler(t.width),height:e.unref(r).elSizePreHandler(t.height),overflow:n.waveOverflowHidden?"hidden":"initial"})},[e.createVNode(e.unref(s),{"capture-on-pointer-down":n.click,"capture-on-pointer-enter":n.enter,"capture-on-pointer-leave":n.leave,onHandlePointerEvent:u},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:3},8,["capture-on-pointer-down","capture-on-pointer-enter","capture-on-pointer-leave"])],4))}});module.exports=p;