birdpaper-ui
Version:
一个通用的 vue3 UI组件库。A common vue3 UI component library.
86 lines (85 loc) • 2.27 kB
JavaScript
import { on, off, throttle } from "../../utils/util.js";
import { vClickOutside } from "../../directives/clickOutside.js";
import { defineComponent, ref, onMounted, nextTick, onBeforeUnmount } from "vue";
const _sfc_main = defineComponent({
name: "Tooltip",
props: {
/** 文本提示内容 */
content: { type: String, default: "" },
/** 触发方式 */
trigger: { type: String, default: "hover" }
},
directives: { clickOutside: vClickOutside },
setup(props, { slots }) {
const name = "bp-tooltip";
const containerRef = ref();
const slotRef = ref();
const show = ref(false);
const visible = ref(false);
const handleResize = () => {
var _a;
const slotRect = (_a = slotRef.value) == null ? void 0 : _a.getBoundingClientRect();
if (!slotRect)
return;
const top = slotRect.top - 10 + document.documentElement.scrollTop;
containerRef.value && containerRef.value.setAttribute(
"style",
`top:${top}px;left:${slotRect.left + slotRect.width / 2}px;transform: translateX(-50%) translateY(-100%);display:${visible.value ? "block" : "none"}`
);
};
const handleClick = () => {
if (props.trigger === "hover")
return;
show.value ? closeTool() : openTool();
};
const mouseenter = () => {
if (props.trigger === "click")
return;
openTool();
};
const mouseleave = () => {
if (props.trigger === "click")
return;
closeTool();
};
const openTool = () => {
show.value = true;
setTimeout(() => {
handleResize();
visible.value = true;
}, 0);
};
const closeTool = () => {
if (!visible.value)
return;
visible.value = false;
nextTick(() => {
show.value = false;
});
};
onMounted(() => {
nextTick(() => {
on(window, "resize", throttle(handleResize, 100));
});
});
onBeforeUnmount(() => {
off(window, "resize", handleResize);
});
return {
name,
slotRef,
containerRef,
show,
visible,
slots,
mouseenter,
mouseleave,
openTool,
closeTool,
handleClick
};
}
});
export {
_sfc_main as default
};