vue自定义指令实现tooltip功能

1、需求
元素展示提示框跟随鼠标移动
2、思路
vue的自定义指令
将显示内容放到容器中，通过值传递，监听鼠标移入事件，鼠标移入后将容器append到body
监听鼠标移动事件，根据鼠标的e.clientY，e.clientX修改容器位置
监听鼠标移出事件，销毁容器
3、代码

// 自定义提示指令
directives: {
    tooltip(el, binding){
        // 鼠标移入时，将浮沉元素插入到body中
        el.onmouseenter = function (e) {
          // 创建浮层元素并设置样式
          const vcTooltipDom = document.createElement("div");
          vcTooltipDom.style.cssText = `
		          position:absolute;
		          background: #fff;;
		          color:#fff;
		          font-size:14px;
		          z-index:1000
			;
          // 设置id方便寻找
          vcTooltipDom.setAttribute("id", "vc-tooltip");
          // 将浮层插入到body中
          document.body.appendChild(vcTooltipDom);
          // 浮层中的文字 通过属性值传递动态的显示文案
          document.getElementById("vc-tooltip").innerHTML =
            el.getAttribute("tips");
        };
        // 鼠标移动时，动态修改浮沉的位置属性
        el.onmousemove = function (e) {
          const vcTooltipDom = document.getElementById("vc-tooltip");
          vcTooltipDom.style.top = e.clientY + 15 + "px";
          vcTooltipDom.style.left = e.clientX + 15 + "px";
        };
        // 鼠标移出时将浮层元素销毁
        el.onmouseleave = function () {
          // 找到浮层元素并移出
          const vcTooltipDom = document.getElementById("vc-tooltip");
          vcTooltipDom && document.body.removeChild(vcTooltipDom);
        };
    },
  },

4、在元素上使用

<div v-tooltip :tip='youtxt'></div>