react 悬浮现实Tooltip封装

前言：对于前端多余文字超出后现实三个点，悬浮上去后悬浮出来剩余文字，这样子的功能清凉有便捷，深的用户喜爱，

废话不多说，上代码👇

import { Tooltip } from 'antd';



/**
 *
 * 手势悬浮封装
 *
 * */

export const TooltipRender = (str, num) => {
    if (!str) {
        return '-';
    }
    if (str.length > num) {
        return (
            <Tooltip title={str}>
                <span style={{ cursor: 'pointer' }}>{str.slice(0, num)}...</span>
            </Tooltip>
        );
    }
    return <Tooltip>{str}</Tooltip>;
};

这样子做了简单的封装，把antd里面的源码给惊醒了二次封装，咱们只需要在调用的时候，
1.参数一是你要传入的字符串，
2.参数二是你根据字符串第几位现实出，（...）三点
 

import { TooltipRender } from '@/utils/utils';

// 引入了封装的方法，这样子使用就可以了
TooltipRender(value, 8);

说到最后希望这篇帖子能够帮助到你，代码可以抄但是更得理解，多敲才是王道希望你对代码有着真挚的感情，对自己敲出的代码都有不一样的自信，感谢您的浏览，愿你出走半生，归来仍是少年