@open-data-v/ui
Version:
OpenDataV UI基础包
110 lines (109 loc) • 4.5 kB
JavaScript
import { defineComponent as S, ref as d, reactive as C, onMounted as W, nextTick as _, onBeforeUnmount as $, openBlock as b, createElementBlock as g, renderSlot as w, createVNode as z, Transition as D, withCtx as H, withDirectives as N, createElementVNode as x, normalizeClass as O, normalizeStyle as V, toDisplayString as X, vShow as Y } from "vue";
import { getOffset as j, getWindow as y } from "../util/dom.esm.js";
const A = { key: 0 }, F = /* @__PURE__ */ S({
__name: "Tooltip",
props: {
content: {},
placement: { default: "bottom-left" },
maxWidth: { default: 500 },
delay: { default: 0 },
appendToBody: { type: Boolean, default: !0 },
transition: { default: "fade" },
x: { default: 0 },
y: { default: 0 },
trigger: { default: "hover" }
},
emits: ["click"],
setup(k, { expose: T, emit: E }) {
const o = k, L = E, a = d(), l = C({
clearTime: 0,
visible: !1,
tooltipStyle: {}
}), s = d(), B = d(!1);
W(() => {
_(() => {
o.trigger === "click" ? document.addEventListener("click", h, !1) : (s.value.addEventListener("mouseenter", m, !1), s.value.addEventListener("mouseleave", c, !1)), o.appendToBody && a.value && (document.body.appendChild(a.value), B.value = !0);
});
}), $(() => {
o.trigger === "click" ? document.removeEventListener("click", h, !1) : (s.value.removeEventListener("mouseenter", m, !1), s.value.removeEventListener("mouseleave", c, !1)), o.appendToBody && a.value && document.body.removeChild(a.value);
});
const n = (e) => e % 2 === 0 ? e : e + 1, p = () => {
const e = j(s.value), i = y().width, r = (o.y || 0) + 8, t = {
maxWidth: o.maxWidth + "px"
};
if (o.appendToBody) {
const f = y().height - e.top + r + "px";
switch (o.placement) {
case "top-left":
t.left = e.left + o.x + "px", t.bottom = f;
break;
case "top":
t.transform = "translateX(-50%)", t.left = n(e.left + e.width / 2 + o.x) + "px", t.bottom = f;
break;
case "top-right":
t.right = i - (e.left + e.width + o.x) + "px", t.bottom = f;
break;
case "left":
t.right = i - (e.left - 8 + o.x) + "px", t.top = n(e.top + e.height / 2) + "px", t.transform = "translateY(-50%)";
break;
case "right":
t.left = e.left + e.width + 8 + o.x + "px", t.top = n(e.top + e.height / 2) + "px", t.transform = "translateY(-50%)";
break;
case "bottom-left":
t.left = e.left + o.x + "px", t.top = e.top + e.height + r + "px";
break;
case "bottom":
t.left = n(e.left + e.width / 2 + o.x) + "px", t.transform = "translateX(-50%)", t.top = e.top + e.height + r + "px";
break;
case "bottom-right":
t.right = i - (e.left + e.width + o.x) + "px", t.top = e.top + e.height + r + "px";
break;
}
}
l.tooltipStyle = Object.assign({}, t);
}, m = () => {
p(), window.clearTimeout(l.clearTime), l.visible = !0, o.delay && a.value && (a.value.addEventListener("mouseenter", u, !1), a.value.addEventListener("mouseleave", v, !1));
}, c = () => {
l.clearTime = window.setTimeout(() => {
l.visible = !1;
}, o.delay);
}, u = () => {
window.clearTimeout(l.clearTime);
}, v = () => {
c(), a.value.removeEventListener("mouseenter", u, !1), a.value.removeEventListener("mouseleave", v, !1);
}, h = (e) => {
e && s.value.contains(e.target) ? (p(), l.visible = !0) : l.visible = !1, L("click", l.visible);
};
return T({ close: () => {
l.visible = !1;
} }), (e, i) => (b(), g("span", {
ref_key: "el",
ref: s,
class: "inline-block relative"
}, [
w(e.$slots, "default"),
z(D, {
name: `tooltip-${e.transition}`
}, {
default: H(() => [
N(x("div", {
ref_key: "tooltipEl",
ref: a,
class: O(["tooltip", e.placement]),
style: V(l.tooltipStyle)
}, [
i[0] || (i[0] = x("i", { class: "arrow" }, null, -1)),
e.content ? (b(), g("span", A, X(e.content), 1)) : w(e.$slots, "content", { key: 1 })
], 6), [
[Y, l.visible]
])
]),
_: 3
}, 8, ["name"])
], 512));
}
});
export {
F as default
};
//# sourceMappingURL=Tooltip.vue.esm.js.map