vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
81 lines (80 loc) • 2.94 kB
JavaScript
import { reactive as v, ref as u, computed as d, onMounted as f, nextTick as h, onBeforeUnmount as k } from "vue";
const w = (t, l, o) => {
const a = v({
visible: !1,
clearTime: 0
}), i = u({}), m = d(() => ["tooltip-box", `is-${t.theme}`, t.placement, t.className, { "is-shadow": t.shadow }]), s = () => {
if (!l.value)
return;
const e = {
position: "absolute",
top: void 0,
left: void 0,
right: void 0,
bottom: void 0,
transform: void 0
};
switch (t.placement) {
case "top-left":
e.top = "0", e.left = "0", e.translate = "0 calc(-100% - 0.6em)";
break;
case "top":
e.top = "0", e.left = "50%", e.translate = "-50% calc(-100% - 0.6em)";
break;
case "top-right":
e.top = "0", e.right = "0", e.translate = "0 calc(-100% - 0.6em)";
break;
case "left":
e.top = "50%", e.left = "0", e.translate = "calc(-100% - 0.6em) -50%";
break;
case "right":
e.top = "50%", e.right = "0", e.translate = "calc(100% + 0.6em) -50%";
break;
case "bottom-left":
e.left = "0", e.bottom = "0", e.translate = "0 calc(100% + 0.6em)";
break;
case "bottom":
e.left = "50%", e.bottom = "0", e.translate = "-50% calc(100% + 0.6em)";
break;
case "bottom-right":
e.right = "0", e.bottom = "0", e.translate = "0 calc(100% + 0.6em)";
break;
case "right-top":
e.top = "0", e.right = "0", e.translate = "calc(100% + 0.6em) 0";
break;
case "left-top":
e.top = "0", e.left = "0", e.translate = "calc(-100% - 0.6em) 0";
break;
case "right-bottom":
e.right = "0", e.bottom = "0", e.translate = "calc(100% + 0.6em) 0";
break;
case "left-bottom":
e.left = "0", e.bottom = "0", e.translate = "calc(-100% - 0.6em) 0";
break;
}
i.value = e;
}, c = () => {
t.disabled || t.always || (window.clearTimeout(a.clearTime), s(), a.visible = !0);
}, n = () => {
t.disabled || t.always || (a.clearTime = window.setTimeout(() => a.visible = !1, t.delay));
}, r = (e) => {
t.disabled || (!t.always && l.value && (l.value.contains(e.target) ? (s(), a.visible = !0) : a.visible = !1), o("change", a.visible));
}, b = () => {
a.visible = !1;
};
return f(() => {
h(() => {
t.always && (a.visible = !0, s()), t.trigger === "click" ? document.addEventListener("click", r, !1) : l.value && (l.value.addEventListener("mouseenter", c, !1), l.value.addEventListener("mouseleave", n, !1));
});
}), k(() => {
t.trigger === "click" ? document.removeEventListener("click", r, !1) : l.value && (l.value.removeEventListener("mouseenter", c, !1), l.value.removeEventListener("mouseleave", n, !1));
}), {
state: a,
tooltipStyle: i,
tooltipBoxClass: m,
handleClose: b
};
};
export {
w as useTooltip
};