st-common-ui-vue3
Version:
小尾巴通用 Vue3 UI 组件库
57 lines (56 loc) • 2.47 kB
JavaScript
import { defineComponent as s, openBlock as c, createElementBlock as f, normalizeStyle as v, unref as n, createVNode as u, withCtx as m, renderSlot as w } from "vue";
import * as o from "../../node_modules/.pnpm/st-common-ui-utils@0.1.1/node_modules/st-common-ui-utils/es/utils/el-size-util.js";
import y from "../StCapturePointerContainer/StCapturePointerContainer.vue.js";
/* empty css */
import { randomInt_0_n as l } from "../../node_modules/.pnpm/st-common-core@0.1.1/node_modules/st-common-core/es/num/utils/random-num-util.js";
const z = /* @__PURE__ */ s({
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: 0.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 e = d, p = (t, i, r) => {
const a = document.createElement("div");
a.classList.add("st-click-wave-container__wave"), a.style.left = t + "px", a.style.top = i + "px", a.style.zIndex = e.waveZIndex + "", a.style.background = e.waveColorRandom ? `rgb(${l(255)}, ${l(255)}, ${l(255)})` : e.waveColor, a.style.animationDuration = e.speed + "ms", r.appendChild(a), setTimeout(() => {
r.removeChild(a);
}, e.speed);
};
return (t, i) => (c(), f("div", {
class: "st-click-wave-container",
style: v({
"--wave-max-size": n(o).elSizePreHandler(e.waveMaxSize),
"--wave-initial-opacity": e.waveInitialOpacity,
width: n(o).elSizePreHandler(e.width),
height: n(o).elSizePreHandler(e.height),
overflow: t.waveOverflowHidden ? "hidden" : "initial"
})
}, [
u(n(y), {
"capture-on-pointer-down": t.click,
"capture-on-pointer-enter": t.enter,
"capture-on-pointer-leave": t.leave,
onHandlePointerEvent: p
}, {
default: m(() => [
w(t.$slots, "default")
]),
_: 3
}, 8, ["capture-on-pointer-down", "capture-on-pointer-enter", "capture-on-pointer-leave"])
], 4));
}
});
export {
z as default
};