Ant Designd pro 列表的滚动轮博，文字过长时，展示...并显示弹框

样式展示

 

index.jsx

import React, { useEffect, useState } from 'react';
import styles from './index.less';
import TitleBar from '@/pages/commonComponents/TitleBar';
import ModuleEmpty from '@/pages/commonComponents/ModuleEmpty';
import { connect, request } from 'umi';
import { Tooltip } from 'antd';

const selectedColor = '#123979';

var l1 = null;
var l2 = null;
var box = null;
var scrollMove = null;

function index(props) {
    const [hidden,setHidden] = useState(true);
    const [height, setHeight] = useState(0);
    const [selected, setSelected] = useState();
    const [tb2Array,setTb2Array] = useState([]);
    const [isEmpty,setIsEmpty] = useState(null);
    const [flag, setFlag] = useState(0);
    const [Index, setIndex] = useState(-1);
    const [array2, setArray2] = useState([]);
    const { uniqueCode } = props.accountProject;

    useEffect(() => {
        if (array2.length > 0) {
            setDivHeight();
            window.addEventListener("resize", function () {
                if (document.getElementById('mochu') != null) {
                    setDivHeight();
                }
            });
        }
    }, [array2]);


    useEffect(() => {
        if (uniqueCode) {
            request(`/api/ccs/working_basis?uniqueCode=${uniqueCode}`, {
                method: 'GET'
            }).then(function (response) {
                if (response.code == 200) {
                    const result = response.data.length > 0 ? response.data : [];
                    response.data.length > 0 ? setIsEmpty(false) : setIsEmpty(true);

                    let sign = true;
                    result.forEach((element,index) => {
                        if(element.content){
                            sign=false;
                        }
                    });
                    if(sign){
                        setIsEmpty(sign);
                        setArray2([...[]]);
                    }else{
                        setArray2([...result]);
                    }

                    // setArray2([...result]);
                }

            })
        }
    }, [uniqueCode])

    function setDivHeight() {
        setHidden(false);
        //获取高度
        const height = document.getElementById('mochu').clientHeight;
        setHidden(true);
        setHeight(height);
        if (scrollMove) {
            clearInterval(scrollMove);
        }
        scollTitle();
    }

    function scollTitle() {
        box = document.getElementById("bm_content");
        l1 = document.getElementById("tb1");
        l2 = document.getElementById("tb2");
        autoScroll();
        //鼠标离开时，滚动继续
        box.onmouseout = function () {
            scrollMove = setInterval(scrollup, 30);
        }
    }


    function autoScroll() {

        // var product = RenderList();
        // l1.innerHTML = product;
        // if (l1.offsetHeight >  box.offsetHeight) {
        //     l2.innerHTML = l1.innerHTML;//克隆list1的数据，使得list2和list1的数据一样
        //     scrollMove = setInterval(scrollup, 30);//数值越大，滚动速度越慢
        //     box.onmouseover = function () {
        //         clearInterval(scrollMove);
        //     }
        // }
        if (document.getElementById('mochu') && document.getElementById('mochu').clientHeight) {
            const height = document.getElementById('mochu').clientHeight;
            if (l1.offsetHeight > height) {
                setTb2Array([...array2]);
                scrollMove = setInterval(scrollup, 30);//数值越大，滚动速度越慢
                box.onmouseover = function () {
                    clearInterval(scrollMove);
                }
            } else {
                setTb2Array([...[]]);
            }
        }
        
    }

    function scrollup() {
        //滚动条距离顶部的值恰好等于list1的高度时，达到滚动临界点，此时将让scrollTop=0,让list1回到初始位置，实现无缝滚动
        if (box.scrollTop >= l1.offsetHeight) {
            box.scrollTop = 0;
        } else {
            box.scrollTop++;
        }
    }

    function selectedOne(i) {
        setSelected(i);
    }



    const handlemouseenter = (e, index) => {
        console.log(e)
        // console.log(e.target.clientWidth, e.target.scrollWidth)
        // console.log(e.target.clientWidth != e.target.scrollWidth)
        if (e.target.clientWidth != e.target.scrollWidth) {
            setFlag(1),
            setIndex(index);
        } else {
            setFlag(0)
        }
    }
    

    function content(){
        if (hidden && array2.length > 0) {
            return  <div id="bm_content" className={styles.bm_content} style={{ height: height+'px' }}>
                        <div >
                            <div id="tb1">
                                {
                                    array2.map((item, index) => {
                                        if (item.content) {
                                            return <div onMouseEnter={(e) => handlemouseenter(e, index)} className={styles.title} style={{ backgroundColor: selected == index ? selectedColor : 'transparent' }} onClick={() => { selectedOne(index) }} key={index + ''}>
                                                        <Tooltip title={flag&&Index==index? item.content : null}>
                                                                {item.content}
                                                        </Tooltip>
                                                    </div>
                                               
                                        }
                                        
                                    })
                                }
                            </div>
                            <div id="tb2">
                                {
                                    tb2Array.length>0&&tb2Array.map((item, index) => {
                                        if(item.content){
                                            return <div  onMouseEnter={(e) => handlemouseenter(e, index)} className={styles.title} style={{backgroundColor: selected == index ? selectedColor : 'transparent'}} onClick={() => { selectedOne(index) }} key={index+''}>
                                           <Tooltip title={flag&&Index==index? item.content : null}>
                                               
                                               {item.content}
                                         
                                            </Tooltip>
                                        </div>
                                        }
                                        
                                    })
                                }
                            </div>
                        </div>
                    </div>
        }

        if(isEmpty == true){
            return <ModuleEmpty/>;
        }
    }
    


    return (
        <div className={styles.main}>
            <TitleBar title='工作基础' />


            <div style={{ height: '88%', overflow: 'hidden' }} id='mochu'>
                
                {content()}
            </div>

        </div>
    )
};
export default connect(
    ({ accountProject, loading, }) => ({ accountProject, loading: loading.effects['accountProject'], }),
)(index);

index.less

.main{
    height: 100%;
    border: 1px solid rgba(38,77,187, 0.5);
    display: flex;
    flex-direction: column;
    // overflow: hidden;
}

.bm_content{
    width: 100%;
    height: 1px;
    text-align: center;
    /* background-color: white; */
    /* margin: 0px 5px 0 5px; */
    /* border-radius: 3px; */
    font-size: 1.4rem;
    overflow: hidden;
    position: relative;
    display: inline-block;
    // top: 4px;
    // bottom: -4px;
    top:0px;
    bottom:0px;
    line-height: 4rem;
    
}
.title{
    line-height: 2;
    cursor: pointer;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    color: #fff;
    padding: 1rem 2rem;
   
}