st-common-ui-vue3
Version:
小尾巴通用 Vue3 UI 组件库
63 lines (62 loc) • 2.27 kB
JavaScript
import { defineComponent as s, ref as a, openBlock as h, createElementBlock as u, normalizeStyle as d, unref as r, createVNode as p, withCtx as f, createElementVNode as c, renderSlot as m } from "vue";
import * as n from "../../node_modules/.pnpm/st-common-ui-utils@0.1.1/node_modules/st-common-ui-utils/es/utils/el-size-util.js";
import S from "../StCapturePointerContainer/StCapturePointerContainer.vue.js";
/* empty css */
const B = /* @__PURE__ */ s({
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(v) {
const i = a(0), o = a(0), l = (e, t) => {
i.value = e, o.value = t;
};
return (e, t) => (h(), u("div", {
class: "st-hover-shine-container",
style: d({
"--shine-size": r(n).elSizePreHandler(e.shineSize),
"--shine-color": e.shineColor,
"--shine-x": i.value + "px",
"--shine-y": o.value + "px",
"--speed": r(n).elSizePreHandler(e.speed, "ms"),
"--shine-border-radius": r(n).elSizePreHandler(e.shineBorderRadius),
width: r(n).elSizePreHandler(e.width),
height: r(n).elSizePreHandler(e.height),
padding: r(n).elSizePreHandler(e.shineBorderWidth),
background: e.background
})
}, [
p(r(S), {
"capture-on-pointer-move": "",
"capture-on-pointer-enter": "",
onHandlePointerEvent: l
}, {
default: f(() => [
c("div", {
class: "st-hover-shine-container__content-box",
style: d({
background: e.contentBackground,
backdropFilter: `blur(${r(n).elSizePreHandler(e.shineBlur)})`
})
}, [
m(e.$slots, "default", {}, void 0, !0)
], 4)
]),
_: 3
})
], 4));
}
});
export {
B as default
};