|
@@ -35,6 +35,8 @@ class SpreadDrop extends Component{
|
|
|
ban:{}, //放'伴'字段
|
|
|
editable:false, //双击编辑
|
|
|
labelVal:'', //存放标签原有的值--主诉字数限制用
|
|
|
+ boxLeft:null,
|
|
|
+ boxTop:null
|
|
|
};
|
|
|
this.$div = React.createRef();
|
|
|
this.handleSelect = this.handleSelect.bind(this);
|
|
@@ -51,6 +53,13 @@ class SpreadDrop extends Component{
|
|
|
}
|
|
|
handleShow(e){//单击
|
|
|
e&&e.stopPropagation();
|
|
|
+ let boxLeft = e.pageX -175 + 'px';
|
|
|
+ let offsetTop = e.target.offsetTop;
|
|
|
+ let boxTop = offsetTop + 29 + 'px';
|
|
|
+ this.setState({
|
|
|
+ boxLeft:boxLeft,
|
|
|
+ boxTop:boxTop
|
|
|
+ })
|
|
|
// window.event? window.event.cancelBubble = true : e.stopPropagation();
|
|
|
// this.setStateInit(); //恢复初始选中状态
|
|
|
const {ikey,handleShow,placeholder,flag,id,value,tagType,type} = this.props;
|
|
@@ -310,7 +319,7 @@ class SpreadDrop extends Component{
|
|
|
|
|
|
render(){
|
|
|
const {placeholder,value,show} = this.props;
|
|
|
- const {editable} = this.state;
|
|
|
+ const {editable,boxLeft,boxTop} = this.state;
|
|
|
return <div className={style['container']}
|
|
|
onFocus={(e)=>e.stopPropagation()}
|
|
|
onBlur={(e)=>e.stopPropagation()}
|
|
@@ -325,7 +334,7 @@ class SpreadDrop extends Component{
|
|
|
onInput={this.onChange}
|
|
|
onkeydown={handleEnter}
|
|
|
>{value||placeholder}</div>
|
|
|
- <div className={style["drop-list"]} style={{display:show?'block':'none'}} contentEditable="false" onClick={(e)=>{e.stopPropagation();}}>
|
|
|
+ <div className={style["drop-list"]} style={{display:show?'block':'none',top:boxTop,left:boxLeft}} contentEditable="false" onClick={(e)=>{e.stopPropagation();}}>
|
|
|
{this.getLabels()}
|
|
|
<div className="oper">
|
|
|
<span className={style['clear']} onClick={this.handleClear}>清空选项</span>
|