自定义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);
    });
}
相关推荐
疏狂难除1 分钟前
关于spiderdemo第二题的奇思妙想
javascript·爬虫
渣渣盟21 分钟前
探索Word2Vec:从文本向量化到中文语料处理
前端·javascript·python·文本向量化
Pu_Nine_923 分钟前
Vue 3 + TypeScript 项目性能优化全链路实战:从 2.1MB 到 130KB 的蜕变
前端·vue.js·性能优化·typescript·1024程序员节
云枫晖39 分钟前
Webpack系列-Loader
前端·webpack
aggression43 分钟前
代码敲击乐:让你了解前端的动静结合和移动端的适配性
前端
yinuo43 分钟前
深入理解与实战 Git Submodule
前端
骑自行车的码农44 分钟前
React 事件收集函数
前端·react.js
无羡仙1 小时前
JavaScript中的继承实现方式
javascript
一个处女座的程序猿O(∩_∩)O1 小时前
Vue CLI 插件开发完全指南:从原理到实战
前端·javascript·vue.js
小蜜蜂dry1 小时前
JavaScript 原型
前端·javascript