使用 jQuery 实现鼠标悬停显示隐藏内容的 vue 自定义指令

1. 在vue项目中引入jQuery
2. 新建 directive 文件夹，新建 overflow.js，代码如下

// overflow.js
function mousePosition(ev) {
    ev = ev || window.event;
    if (ev.pageX || ev.pageY) {
        return {
            x: ev.pageX,
            y: ev.pageY
        };
    }
    return {
        x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
        y: ev.clientY + document.body.scrollTop - document.body.clientTop
    };
}

function bindMapMouseTitle(selector, value) {
    /**
     * @param {object} selector jquery对象
     * @param {string} value title字符串
     */
    let self = this;
    selector.mouseover(function (e) {
        let text = value || $(this).html();
        let mousePos = mousePosition(e);
        if (selector.get(0).clientWidth < selector.get(0).scrollWidth) {
            $("#overflow-title").html(text).show().css({
                "top": mousePos.y,
                "left": mousePos.x
            });
        }
    });
    /* 增加click事件， fix元素隐藏后无法触发mouseout事件 = 模拟html title属性行为 */
    selector.bind('click mouseout', function(e){
        $("#overflow-title").html("").hide();
    });
}

export default {
    /** text过长title */
    bind: function (element, binding) {
        let value = binding.value;
        bindMapMouseTitle($(element), value);
    },
    update: function (element, binding) {
        let value = binding.value;
        bindMapMouseTitle($(element), value);
    }
}
复制代码

3. 在 main.js 中全局注册指令

// main.js
import overflow from './directive/overflow'

Vue.directive('overflow', overflow)
复制代码

4. 在 App.vue 中添加显示盒子

<template>
    <div id="app">
        <router-view />
        <div id="overflow-title"></div>
    </div>
</template>
复制代码

5. 添加盒子样式(为你的盒子添加你喜欢的样式吧)

#overflow-title {
    max-width: 250px;
    word-wrap: break-word;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 8px;
    font-size: 12px;
    line-height: 23px;
    color: #666;
    background-color: #f3f3f3;
    box-shadow: 2px 1px 3px 0 rgba(0, 0, 0, 0.07);
    border-radius: 6px;
    border: solid 1px #ddd;
    z-index: 9999999;
}
复制代码

6. 使用

<div v-overflow>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
复制代码

7. 效果