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

参考文档: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);
    });
}
相关推荐
华仔啊4 小时前
前端必看!12个JS神级简写技巧,代码效率直接飙升80%,告别加班!
前端·javascript
excel4 小时前
dep.ts 逐行解读
前端·javascript·vue.js
爱上妖精的尾巴4 小时前
5-20 WPS JS宏 every与some数组的[与或]迭代(数组的逻辑判断)
开发语言·前端·javascript·wps·js宏·jsa
excel4 小时前
Vue3 响应式核心源码全解析:Dep、Link 与 track/trigger 完整执行机制详解
前端
前端大卫5 小时前
一个关于时区的线上问题
前端·javascript·vue.js
whltaoin5 小时前
中秋赏月互动页面:用前端技术演绎传统节日之美
前端·javascript·html·css3·中秋主题前端
IT派同学6 小时前
TableWiz诞生记:一个被表格合并逼疯的程序员如何自救
前端·vue.js
西洼工作室8 小时前
CSS高效开发三大方向
前端·css
昔人'8 小时前
css`font-variant-numeric: tabular-nums` 用来控制数字的样式。
前端·css
铅笔侠_小龙虾9 小时前
动手实现简单Vue.js ,探索Vue原理
前端·javascript·vue.js