vue3 自定义指令超长自动显示tooltip v-overflow-tooltip

huaiyin_hcy

已于 2024-07-15 16:58:31 修改

阅读量117

点赞数 6

文章标签：前端 vue

于 2024-07-15 16:46:52 首次发布

本文链接：https://blog.csdn.net/huaiyin_hcy/article/details/140442450

版权

import { h, render } from 'vue';
import { ElTooltip } from 'element-plus';

//测量子节点长度（必须在mounted之后）
export function range(el: HTMLElement) {
    const range = document.createRange();
    range.setStart(el, 0);
    range.setEnd(el, el.childNodes.length);
    return range.getBoundingClientRect().width;
}

//是否超长（必须在mounted之后）
export function isOverflow(el: HTMLElement) {
    const targetW = el.getBoundingClientRect().width;
    return range(el) > targetW;
}

function overflowTooltip(el: HTMLElement, bind: any) {
    el.style.overflow = 'hidden';
    el.style.textOverflow = 'ellipsis';
    el.style.whiteSpace = 'nowrap';
    if (!isOverflow(el)) return;
    const text = el.innerText;
    //el.childNodes是一个动态的数组，删除元素会改变数组的长度，用for会出问题
    while (el.childNodes.length) {
        el.removeChild(el.childNodes[0]);
    }
    // jsx 写法
    // const tooltip = <ElTooltip content={bind.value || text}>{text}</ElTooltip>;
    // vNode写法
    const tooltip = h(ElTooltip, { content: bind.value || text }, [h('text', text)]);
    render(tooltip, el);
    const child = el.children[0] as HTMLElement;
    const style = child.style;
    style.display = 'block';
    style.width = '100%';
    style.overflow = 'hidden';
    style.textOverflow = 'ellipsis';
    style.whiteSpace = 'nowrap';
}

const app = createApp(App);

//这是一种简写
app.directive('overflowTooltip', overflowTooltip);
//等价于
// app.directive('overflowTooltip', {
//     mounted: overflowTooltip,
//     updated: overflowTooltip
// });

app.mount('#app');

<template>
    <!--  自定义指令不建议使用在组件上  -->
    <div style="width: 100px;" v-overflow-tooltip>这是一段很长的文字。。。。。。。。。。。。</div>
    <div style="width: 100px;" v-overflow-tooltip="'这里可以修改tooltip的内容,默认是innerText'">这是一段很长的文字。。。。。。。。。。。。</div>
</template>