Using jQuery to display hidden vUE custom instructions

1. Introduce jQuery into your VUE project
2. newdirectiveFolder, newoverflow.js, the code is as follows

// 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 object *@param {string} Value title The character string */
    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 }); }});/* Add click event, fix element hidden cannot trigger mouseout event = simulate HTML title property behavior */
    selector.bind('click mouseout'.function(e){$("#overflow-title").html("").hide();
    });
}

export default {
    /** text too long title */
    bind: function (element, binding) {
        let value = binding.value;
        bindMapMouseTitle($(element), value);
    },
    update: function (element, binding) {
        letvalue = binding.value; bindMapMouseTitle($(element), value); }}Copy the code

3. inmain.jsGlobal register instruction in

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

Vue.directive('overflow', overflow)
Copy the code

4. inApp.vueAdd display box in

<template>
    <div id="app">
        <router-view />
        <div id="overflow-title"></div>
    </div>
</template>
Copy the code

5. Add box Styles (Add styles to your boxes that you like)

#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;
}
Copy the code

6. use

<div v-overflow>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</div>
Copy the code

7. The effect