epic-designer
Version:
基于vue3的设计器,可视化开发页面表单
141 lines (140 loc) • 5.65 kB
JavaScript
import { defineComponent as U, ref as v, computed as j, onMounted as q, onUnmounted as F, watch as S, nextTick as G, createElementBlock as N, openBlock as k, createElementVNode as T, createBlock as J, renderSlot as M, Teleport as K, createVNode as Q, Transition as Z, withCtx as _, createCommentVNode as $, normalizeStyle as O, normalizeClass as z, createTextVNode as ee, toDisplayString as te } from "vue";
const oe = ["tabindex"], le = { class: "ep-tooltip-content" }, ne = {
key: 0,
class: "ep-tooltip-arrow"
}, ae = /* @__PURE__ */ U({
__name: "tooltip",
props: {
arrow: { type: Boolean, default: !0 },
color: { default: "default" },
content: { default: "" },
mouseEnterDelay: { default: 600 },
mouseLeaveDelay: { default: 100 },
open: { type: Boolean, default: void 0 },
overlayClassName: { default: "" },
overlayStyle: { default: () => ({}) },
placement: { default: "top" },
trigger: { default: "hover" }
},
emits: ["openChange", "update:open", "visibleChange"],
setup(s, { emit: H }) {
const e = s, t = H, o = v(!1), c = v(null), u = v(null), V = v(null), b = v(!1);
let h = null, g = null, m = null;
const d = () => {
h && (clearTimeout(h), h = null), g && (clearTimeout(g), g = null), m && (clearTimeout(m), m = null);
}, R = () => {
o.value || b.value || (d(), e.mouseEnterDelay > 0 ? h = window.setTimeout(() => {
o.value = !0, t("update:open", !0), t("openChange", !0), t("visibleChange", !0), f();
}, e.mouseEnterDelay) : (o.value = !0, t("update:open", !0), t("openChange", !0), t("visibleChange", !0), f()));
}, x = () => {
o.value && (d(), e.mouseLeaveDelay > 0 ? g = window.setTimeout(() => {
o.value = !1, t("update:open", !1), t("openChange", !1), t("visibleChange", !1);
}, e.mouseLeaveDelay) : (o.value = !1, t("update:open", !1), t("openChange", !1), t("visibleChange", !1)));
}, E = () => {
e.trigger === "hover" && (d(), m = window.setTimeout(() => {
x();
}, 100));
}, W = () => {
o.value ? E() : R();
}, X = () => {
e.trigger === "hover" && (b.value = !1, R());
}, Y = () => {
e.trigger === "hover" && E();
}, A = () => {
e.trigger === "click" && W(), b.value = !0, d(), x();
};
function f() {
if (!c.value || !u.value) return;
const p = Array.from(c.value.childNodes).find((P) => P.nodeType === Node.ELEMENT_NODE), n = p ? p.getBoundingClientRect() : { bottom: 0, height: 0, left: 0, right: 0, top: 0, width: 0 }, i = u.value.getBoundingClientRect(), w = window.pageXOffset || document.documentElement.scrollLeft, y = window.pageYOffset || document.documentElement.scrollTop;
let a = 0, r = 0;
const C = 8;
switch (e.placement) {
case "bottom": {
a = n.bottom + y + C, r = n.left + w + (n.width - i.width) / 2;
break;
}
case "left": {
a = n.top + y + (n.height - i.height) / 2, r = n.left + w - i.width - C;
break;
}
case "right": {
a = n.top + y + (n.height - i.height) / 2, r = n.right + w + C;
break;
}
case "top": {
a = n.top + y - i.height - C, r = n.left + w + (n.width - i.width) / 2;
break;
}
}
const L = window.innerWidth, B = window.innerHeight;
r < 8 && (r = 8), r + i.width > L - 8 && (r = L - i.width - 8), a < 8 && (a = 8), a + i.height > B - 8 && (a = B - i.height - 8), u.value.style.top = `${a}px`, u.value.style.left = `${r}px`;
}
const D = (l) => {
e.trigger === "click" && o.value && c.value && !c.value.contains(l.target) && u.value && !u.value.contains(l.target) && E();
}, I = j(() => ({
position: "fixed",
zIndex: 9999,
...e.overlayStyle
}));
return q(() => {
document.addEventListener("click", D), e.open !== void 0 && (o.value = e.open, e.open && f());
}), F(() => {
document.removeEventListener("click", D), d();
}), S(o, (l) => {
l && G(f);
}), S(
() => e.open,
(l) => {
l !== void 0 && (o.value = l, l && f());
}
), (l, p) => (k(), N("span", {
ref_key: "wrapperRef",
ref: V,
class: "ep-tooltip-wrapper"
}, [
T("span", {
ref_key: "triggerRef",
ref: c,
class: "ep-tooltip-trigger",
onMouseenter: X,
onMouseleave: Y,
onClick: A,
tabindex: s.trigger === "focus" ? 0 : void 0
}, [
M(l.$slots, "default", {}, void 0, !0)
], 40, oe),
(k(), J(K, { to: "body" }, [
Q(Z, { name: "ep-tooltip-fade" }, {
default: _(() => [
o.value ? (k(), N("div", {
key: 0,
ref_key: "tooltipRef",
ref: u,
class: z(["ep-tooltip", [`ep-tooltip-placement-${s.placement}`, `ep-tooltip-${s.color}`]]),
style: O(I.value),
role: "tooltip"
}, [
T("div", le, [
s.arrow ? (k(), N("div", ne, [...p[0] || (p[0] = [
T("span", { class: "ep-tooltip-arrow-content" }, null, -1)
])])) : $("", !0),
T("div", {
class: z(["ep-tooltip-inner", s.overlayClassName]),
style: O(s.overlayStyle)
}, [
M(l.$slots, "content", {}, () => [
ee(te(s.content), 1)
], !0)
], 6)
])
], 6)) : $("", !0)
]),
_: 3
})
]))
], 512));
}
});
export {
ae as default
};