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;
}
