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