Browse Source

单列多选下拉菜单位置计算添加

Luolei 6 years atrás
parent
commit
a08663193d

+ 1 - 1
src/common/components/InspectCommon/index.less

@@ -6,7 +6,7 @@
     background-color: #fff;
     padding:28px 8px 8px 8px;
     min-width: 300px;
-    max-width: 600px;
+    max-width: 680px;
     box-sizing: border-box;
     margin-bottom: 80px;
     .llStyle;

+ 6 - 1
src/components/AddInspect/index.less

@@ -125,7 +125,7 @@
     // line-height: 28px;
     overflow: hidden;
     padding-top: 0 !important;
-    width: 290px;
+    width: 330px;
     float: left;
     padding: 0 15px;
     box-sizing: border-box;
@@ -149,9 +149,14 @@
         input {
             width: 40px;
             text-align: center;
+            float: left;
         }
         .unit {
             display: inline-block;
+            max-width: 70px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
         }
     }
 }

+ 2 - 0
src/components/CheckBody/index.jsx

@@ -57,9 +57,11 @@ class CheckBody extends Component{
     const {fetchPushInfos,totalHide,getSearchLocation} = this.props;
     //fetchPushInfos&&fetchPushInfos();
     this.getData();
+    console.log(1111111111111)
     if(totalHide){
       return ;
     }
+    console.log(22222222222222)
     //若使用e.target,因为是onClick事件中,值可能是itembox的而不是span因此会有bug
     
     let leftL=0;      //用焦点元素的左边距替换鼠标点击的左边距,高度还是鼠标点击的位置

+ 13 - 3
src/components/Multiple/index.jsx

@@ -1,6 +1,7 @@
 import react from "react";
 import style from "./index.less";
 import $ from 'jquery';
+import ReactDom from "react-dom";
 import classNames from 'classnames';
 import {handleEnter,isIE,filterArr,deepClone,filterDataArr} from '@utils/tools.js';
 import {Notify} from '@commonComp';
@@ -196,11 +197,20 @@ class Multiple extends react.Component{
       },this);
     }
   }
-
+  getStyle(){
+    const {left,top,show} = this.props;
+    console.log(left,333333333333)
+    return {
+      left:left?left+'px':'0',
+      top:top?top+'px':'0',
+      display:show?'table':'none'        //table onBlur阻止冒泡是为了修复multSpread中数字键盘点击触发最外层数字组件onBlur事件
+    }
+  }
   render(){
     const {placeholder,value,show,data} = this.props;
     const {editable,boxTop,boxLeft} = this.state;
-    return <div className={style["container"]}>
+    const domNode = document.getElementById('root');
+    return ReactDom.createPortal(<div className={style["container"]} style={this.getStyle()}>
       <div className={this.getClass()}
       ref={this.$div}
       onClick={this.handleShow}
@@ -219,7 +229,7 @@ class Multiple extends react.Component{
         </ul>
         
       </div>
-    </div>
+    </div>,domNode)
   }
 
 }