【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;
            }
    }
);
相关推荐
Catherinemin8 分钟前
CSS|08 浮动&清除浮动
前端·css
kaoa00010 分钟前
Linux入门攻坚——42、Nginx及web站点架构模式
linux·前端·nginx
赵大仁40 分钟前
在M系列芯片的Mac上使用Uniapp开发的依赖安装指南
前端·windows·macos·ios·小程序·uni-app·安卓
我码玄黄2 小时前
JS设计模式之中介者模式
javascript·设计模式·中介者模式
xue03052 小时前
react自定义hooks函数
javascript·react.js
Beekeeper&&P...2 小时前
AddressBookController
java·前端·网络
今天也要暴富2 小时前
CSS Grid 布局:属性及使用详解
前端·css
前端熊猫2 小时前
组件十大传值
前端·javascript·vue.js
GISer_Jing3 小时前
React 工具和库面试题(一)
javascript·react.js·ecmascript