tip组件， 根据列表的宽度显示全部内容或者省略号显示，并且鼠标划过泡泡框提示

jsx

import React, { Component } from 'react';

import PropTypes from 'prop-types';

import { Balloon } from '@alifd/next';

import './css.scss';

export default class Tip extends Component {

static displayName = 'Tip';

static propTypes = {

force: PropTypes.bool, // 是否强制出冒泡提示

}

constructor(props) {

super(props);

this.state = {

need: false,

};

this.title = this.props.title;

// React.Children.count

}

getColContent() {

return <div className={this.state.need ? 'ell-box has-ell' : 'ell-box'} ref={ele => this.myTip = ele}><ins>{this.props.children || this.props.title}</ins><span>{this.props.children || this.props.title}</span></div>;

}

render() {

return (this.props.force || this.state.need) && this.props.title !== null && typeof this.props.title !== 'undefined' ? <Balloon.Tooltip visible={true} trigger={this.getColContent()} align="t" children={this.props.title} /> : this.getColContent(); //

}

componentDidMount() {

if(typeof this.props.onRef==='function'){

this.props.onRef(this);

}

this.computed();

}

componentWillReceiveProps(nextProps) {

if (nextProps.title !== this.title) {

setTimeout(() => this.computed(), 500);

}

}

computed() {

if (this.props.force) {

return false;

}

if (!this.myTip) { return false; }

const w = this.myTip.offsetWidth * 2;

const iw = this.myTip.querySelector('ins').offsetWidth;

this.setState({ need: iw > w });

}

componentWillUnmount() {

this.myTip = null;

}

}

 

css

.ell-box{

// display: inline-block;

// white-space: nowrap;

// width:100%;

// overflow: hidden;

// text-overflow: ellipsis;

// vertical-align: middle;

// -webkit-line-clamp: 2;

width: 100%;

text-overflow: ellipsis;

vertical-align: middle;

-webkit-line-clamp: 2;

display: -webkit-box;

-webkit-box-orient: vertical;

overflow: hidden;

&.has-ell{

 

}

ins{

position:absolute;

visibility:hidden;

white-space: nowrap;

-webkit-line-clamp: 2;

font-style: inherit;

z-index:-5;

left:-99999in;

}

}

.next-overlay-wrapper .next-balloon-tooltip{

// word-wrap:break-word;

}

.next-balloon-tooltip:after{

// background-color: #fff !important;

}