st-common-ui-vue3
Version:
小尾巴通用 Vue3 UI 组件库
2 lines (1 loc) • 2.09 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 n=require("../../node_modules/.pnpm/st-common-core@0.1.1/node_modules/st-common-core/es/num/utils/random-num-util.js"),c=e.defineComponent({name:"StClickRippleContainer",__name:"StClickRippleContainer",props:{width:{default:"100%"},height:{default:"100%"},speed:{default:1e3},rippleColor:{default:"#fff"},rippleColorRandom:{type:Boolean,default:!1},rippleMaxSize:{default:"100%"},rippleWidth:{default:"2px"},rippleInitialOpacity:{default:1},rippleZIndex:{default:"initial"},rippleOverflowHidden:{type:Boolean,default:!0},click:{type:Boolean,default:!0},enter:{type:Boolean,default:!1},leave:{type:Boolean,default:!1}},setup(a){const t=a,d=(i,p,o)=>{const l=document.createElement("div");l.classList.add("st-click-ripple-container__ripple"),l.style.left=i+"px",l.style.top=p+"px",l.style.zIndex=t.rippleZIndex+"";const u=t.rippleColorRandom?`rgb(${n.randomInt_0_n(255)}, ${n.randomInt_0_n(255)}, ${n.randomInt_0_n(255)})`:t.rippleColor;l.style.border=`${t.rippleWidth} solid ${u}`,l.style.animationDuration=t.speed+"ms",o.appendChild(l),setTimeout(()=>{o.removeChild(l)},t.speed)};return(i,p)=>(e.openBlock(),e.createElementBlock("div",{class:"st-click-ripple-container",style:e.normalizeStyle({"--ripple-max-size":e.unref(r).elSizePreHandler(t.rippleMaxSize),"--ripple-initial-opacity":t.rippleInitialOpacity,width:e.unref(r).elSizePreHandler(t.width),height:e.unref(r).elSizePreHandler(t.height),overflow:i.rippleOverflowHidden?"hidden":"initial"})},[e.createVNode(e.unref(s),{"capture-on-pointer-down":i.click,"capture-on-pointer-enter":i.enter,"capture-on-pointer-leave":i.leave,onHandlePointerEvent:d},{default:e.withCtx(()=>[e.renderSlot(i.$slots,"default")]),_:3},8,["capture-on-pointer-down","capture-on-pointer-enter","capture-on-pointer-leave"])],4))}});module.exports=c;