【Vue 交互优化-tooltip】tips 跟随鼠标光标

当某div或内容超出一屏时，用户需要查看信息，tips 只能在固定位置显示，用户体验感差 

一：安装 v-tooltip 

npm install v-tooltip@1.1.6    # 我使用的是该版本的

 二：使用

I. 全局引用

import Vue from 'vue'
import VTooltip from 'v-tooltip' 
Vue.use(VTooltip)

 II. HTML片段

<div 
    v-tooltip 
    tips="tips内容"
></div>

III.  JS片段

export default{
    // 自定义提示指令
    directives: {
        tooltip(el, binding){
            // 鼠标移入时，将浮沉元素插入到body中
            el.onmouseenter = function (e) {
                // 创建浮层元素并设置样式
                const vcTooltipDom = document.createElement("div");
                vcTooltipDom.style.cssText = `
                        position:absolute;
                        background: #fff;
                        border-radius: 4px;
                        border: 1px solid #ebeef5;
                        padding: 3px 5px;
                        z-index: 2000;
                        color: #606266;
                        text-align: justify;
                        font-size: 12px;
                        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
                        word-break: break-all;
                        display: none;
                    `;
                // 设置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";
                vcTooltipDom.style.display = "block";
            };
            // 鼠标移出时将浮层元素销毁
            el.onmouseleave = function () {
            // 找到浮层元素并移出
                const vcTooltipDom = document.getElementById("vc-tooltip");
                vcTooltipDom && document.body.removeChild(vcTooltipDom);
            };
        },
    },
}