自定义VUE指定，实现鼠标悬停显示提示面板，离开元素或面板后面板消失

愚愚是个大笨蛋2025-01-01 13:33
参考文档：https://www.bilibili.com/opus/500023412612186477
javascript 复制代码
// 自定义"v-tooltip"指令,实现鼠标悬浮显示文本
Vue.directive('tooltip', {
    bind(element, binding) {
        const tooltipText = binding.value;
        const tooltip = document.createElement('div');
        tooltip.innerHTML = tooltipText;
        tooltip.style.position = 'absolute';
        tooltip.style.display = 'none';
        tooltip.style.background = '#ffffff';
        tooltip.style.borderRadius = '4px';
        tooltip.style.width = '95%';
        tooltip.style.margin = '0px 40px';
        tooltip.style.padding = '5px 10px';
        tooltip.style.fontSize = '12px';
        tooltip.style.textAlign = 'left';
        tooltip.style.zIndex = '1000';
        document.body.appendChild(tooltip);

        // 执行鼠标悬停在元素和面板上展示，离开后面板消失。
        setSecondaryMenu(element, tooltip, 1000);
    }
});

/**
 * 给两个元素绑定事件，鼠标悬停在元素和面板上展示，离开后面板消失。
 * 原理：
 * 鼠标放到按钮上，面板显示出来，鼠标移出按钮，面板延迟dt毫秒消失。
 * 鼠标移出后，面板消失之前，移动到面板上，取消面板的延迟消失
 * 鼠标移出面板后，同样延时dt毫秒消失
 * @param {*} element 鼠标悬停的元素
 * @param {*} tooltip 面板元素
 * @param {*} delayTime 延迟消失的时间，毫秒(ms)
 */
function setSecondaryMenu(element, tooltip, delayTime) {
    /** 鼠标移开按钮后面板延迟消失的时间(ms) */
    var delayTask;

    /**鼠标移入按钮 */
    element.addEventListener("mouseenter", (event) => {
        let rect = element.getBoundingClientRect();
        tooltip.style.display = 'block';
        tooltip.style.top = rect.bottom + 'px';
        clearTimeout(delayTask);
    });
    /**鼠标移出按钮 */
    element.addEventListener("mouseleave", (event) => {
        delayTask = setTimeout(() => {
            tooltip.style.display = 'none';
        }, delayTime);
    });
    /**鼠标移入面板 */
    tooltip.addEventListener("mouseenter", (event) => {
        clearTimeout(delayTask);
    });
    /**鼠标移出面板 */
    tooltip.addEventListener("mouseleave", (event) => {
        delayTask = setTimeout(() => {
            tooltip.style.display = 'none';
        }, delayTime);
    });
}