【JS/TS鼠标气泡跟随】文本提示 / 操作提示

适用于任何类型项目:vue、react、angular、js、ts、jsp、jquery


1、功能封装:

TypeScript 复制代码
export function useMouseActionTip(text: string, parentEl: HTMLElement, offset?: XY) {
    function mousemove(e: MouseEvent) {
        const offsetX = offset?.x || 16;
        const offsetY = offset?.y || 16;
        cursorEl.style.left = e.pageX + offsetX + "px";
        cursorEl.style.top = e.pageY + offsetY + "px";
    }
    function mouseenter() {
        cursorEl.style.display = "block";
    }
    function mouseout() {
        cursorEl.style.display = "none";
    }
    const cursorEl = document.createElement("div");
    cursorEl.className = "_mouse_action_tip";
    cursorEl.innerHTML = text;
    cursorEl.style.display = "block";

    setStyle();
    document.body.appendChild(cursorEl);
    document.addEventListener("mousemove", mousemove);
    parentEl.addEventListener("mouseenter", mouseenter);
    parentEl.addEventListener("mouseout", mouseout);

    return {
        destroy() {
            document.removeEventListener("mousemove", mousemove);
            setStyle();
            parentEl.removeEventListener("mouseenter", mouseenter);
            parentEl.removeEventListener("mouseout", mouseout);
            document.body.removeChild(cursorEl);
        },
    };
}
export type UseMouseActionTip = ReturnType<typeof useMouseActionTip>;
let hasStyle = false;
function setStyle() {
    if (hasStyle) {
        return;
    }
    hasStyle = true;
    const styleElement = document.createElement("style");
    styleElement.textContent = `
    ._mouse_action_tip {
        position: fixed;
        display: flex;
        padding: 5px 10px;
        background-color: #33383e;
        color: #e8eaec;
        border-radius: 4px;
        pointer-events: none;
        z-index: 9999;
        box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 3px, rgba(255, 255, 255, 0.3) 0px 0px 3px;
        font-size: 14px;
      }
    `;
    document.head.appendChild(styleElement);
}

2、使用:

TypeScript 复制代码
let mouseTip: UseMouseActionTip | undefined;
watch(
    () => editorStore.currentSubTool,
    () => {
            if (editorStore.currentSubTool === SubTools.Measure) {
                mouseTip = useMouseActionTip(
                    t("Editor.Tip.Hold_down_and_drag_the_mouse"),
                    editorStore.canvas().canvas.upperCanvasEl
                );
            } else {
                mouseTip?.destroy();
                mouseTip = undefined;
            }
    }
);
相关推荐
西红柿116几秒前
RWAs练习 1-房地产通证化01
前端
ningmengjing_1 分钟前
HTML5和CSS3
前端·css3·html5
我是若尘1 分钟前
你了解HTML中的 rel 属性吗?
前端
前端小哈哈2 分钟前
Vue3 mitt 史上最全使用指南,没有之一
前端·vue.js
范文杰3 分钟前
客观评价一下 Cursor
前端
工藤孤独3 分钟前
Vue 3中的高级轮询解决方案:usePoller组合式函数详解
javascript·vue.js
今天吃土豆吧3 分钟前
fabricjs中因mac retina屏幕像素比导致的捕捉canvas像素不准确
前端·javascript
我自纵横20234 分钟前
第五章:HTML5 大升级:解锁未来技能
前端·html·html5
七月丶4 分钟前
🔥 前端性能优化实战:从 0 到 1 提升 Web 应用速度
前端·架构
leafnote4 分钟前
【antd】Switch,0和1,怎么办?
前端·ant design