vue自定义指令添加跟随鼠标光标提示框v-tooltip方式

目录自定义指令添加跟随鼠标光标提示框v-tooltip1、directives自定义提示指令2、div显示dom标签v-tooltipvue自定义指令实现tooltip功能1、需求2、思路3、代码4、...

目录

自定义指令添加跟随鼠标光标提示框v-tooltip

在vue中添加自定义指令，能够识别dom，通过鼠标hover事件移入当前区域后，显示浮层

1、directives自定义提示指令

 directives: {
  // 自定义提示指令
  tooltip: {
   componentUpdated: function(el, binding) {
    // 鼠标移入时，将浮沉元素插入到body中
    el.onmouseenter = function(e) {
     // 创建浮层元素并设置样式
     const vcTooltipDom = document.createElement('div');
     vcTooltipDom.style.cssText = `
     overflow: auto;
     position:absolute;
     background: #fff;;
     color:#666;
     box-shadow: rgba(168, 168, 168, 0.295) 1px 2px 10px;
     border-radius:5px;
     padding:10px;
     display:inline-block;
     font-size:14px;
     z-index:2
    `;
     // 设置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);
    };
   }
  }
 }

通过监听鼠标移入移出的mouse方法，设置浮层样式与出现时机

2、div显示dom标签v-tooltip

<dijavascriptv id="bar-echart" tips="共有6个任务执行成功" v-tooltip/>

此时运行后，出现浮层

vue自定义指令实现tooltip功能

1、需求

元素展示提示框跟随鼠标移动

2、思路

vue的自定义指令

将显示内容放到容器中，通过值传递，监听鼠标移入事件，鼠标移入后将容器append到body

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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。