st-common-ui-vue3/lib/components/StHoverShineContainer/StHoverShineContainer.vue2.js

小尾巴通用 Vue3 UI 组件库

"use strict";const e=require("vue"),n=require("../../node_modules/.pnpm/st-common-ui-utils@0.1.1/node_modules/st-common-ui-utils/es/utils/el-size-util.js"),l=require("../StCapturePointerContainer/StCapturePointerContainer.vue.js");;/* empty css                                                           */const s=e.defineComponent({name:"StHoverShineContainer",__name:"StHoverShineContainer",props:{width:{default:"100%"},height:{default:"100%"},background:{default:"#333"},contentBackground:{default:"rgba(45, 45, 45, 0.8)"},shineSize:{default:"200px"},shineColor:{default:"#00ff00"},speed:{default:"0.5s"},shineBorderWidth:{default:"2px"},shineBorderRadius:{default:"0.25rem"},shineBlur:{default:"10px"}},setup(d){const i=e.ref(0),t=e.ref(0),a=(r,o)=>{i.value=r,t.value=o};return(r,o)=>(e.openBlock(),e.createElementBlock("div",{class:"st-hover-shine-container",style:e.normalizeStyle({"--shine-size":e.unref(n).elSizePreHandler(r.shineSize),"--shine-color":r.shineColor,"--shine-x":i.value+"px","--shine-y":t.value+"px","--speed":e.unref(n).elSizePreHandler(r.speed,"ms"),"--shine-border-radius":e.unref(n).elSizePreHandler(r.shineBorderRadius),width:e.unref(n).elSizePreHandler(r.width),height:e.unref(n).elSizePreHandler(r.height),padding:e.unref(n).elSizePreHandler(r.shineBorderWidth),background:r.background})},[e.createVNode(e.unref(l),{"capture-on-pointer-move":"","capture-on-pointer-enter":"",onHandlePointerEvent:a},{default:e.withCtx(()=>[e.createElementVNode("div",{class:"st-hover-shine-container__content-box",style:e.normalizeStyle({background:r.contentBackground,backdropFilter:`blur(${e.unref(n).elSizePreHandler(r.shineBlur)})`})},[e.renderSlot(r.$slots,"default",{},void 0,!0)],4)]),_:3})],4))}});module.exports=s;