下拉框打开时标签边框蓝色

src/common/less/variables.less

@@ -161,4 +161,8 @@
   box-shadow: 0 10px 20px 0 #989DA3;
   filter:progid:DXImageTransform.Microsoft.Shadow(color='#989DA3',Direction=125,Strength=6);
   border: 1px solid #f3f0f0;
-}
+}
+
+.borderd{
+   border:1px #3B9ED0 solid;
+ }

src/components/NumberUnitDrop/index.jsx

@@ -29,6 +29,7 @@ class NumberUnitDrop extends Component{
       labelVal:''
     };
     this.$span = React.createRef();
+    this.$cont = React.createRef();
     this.select = this.select.bind(this);
     this.numInpBlur = this.numInpBlur.bind(this);
     this.handleSpanInp = this.handleSpanInp.bind(this);
@@ -114,10 +115,15 @@ class NumberUnitDrop extends Component{
     }
   }
   getClasses(){         //整个标签是否有值的状态
-    const {value,hideTag} = this.props;
+    const {value,hideTag,show} = this.props;
     const inpValue = this.state.value;
     const isSelected = value||inpValue?style['selected']:style['container'];
     const noTag = hideTag?style['no-tag']:'';
+    if(show){
+      $(this.$cont.current).addClass(style['borderd']);
+    }else{
+      $(this.$cont.current).removeClass(style['borderd']);
+    }
     return className(isSelected,noTag);
   }
   changeToEdit(e){        //整个标签双击编辑状态
@@ -146,7 +152,7 @@ class NumberUnitDrop extends Component{
   render(){
     const {placeholder,prefix,suffix,show,value,handleHide} = this.props;
     const {numEditable,editable,hasSelect,placeholderFlag} = this.state;
-    return <div className={this.getClasses()}>
+    return <div className={this.getClasses()} ref={this.$cont}>
       <span>{prefix}</span>
       <span onClick={this.handleNumClick}
             contentEditable={editable}

src/components/RadioDrop/index.jsx

@@ -2,6 +2,7 @@ import React,{Component} from 'react';
 import {handleEnter} from '@utils/tools.js';
 import {DropList} from '@commonComp';
 import style from "./index.less";
+import $ from "jquery";
 
 /****
  * 单选下拉
@@ -23,13 +24,19 @@ class RadioDrop extends Component{
       editable:false,
       timer:null
     };
+    this.$cont = React.createRef();
     this.handleSelect = this.handleSelect.bind(this);
     this.handleShow = this.handleShow.bind(this);
     this.handledbClick = this.handledbClick.bind(this);
     this.handleEditLabel = this.handleEditLabel.bind(this);
   }
   getClass(){
-    const {value,hideTag,placeholder} = this.props;
+    const {value,hideTag,placeholder,show} = this.props;
+    if(show){
+      $(this.$cont.current).addClass(style['borderd']);
+    }else{
+      $(this.$cont.current).removeClass(style['borderd']);
+    }
     if(hideTag){
       return style['no-tag'];
     }
@@ -114,7 +121,7 @@ class RadioDrop extends Component{
   }
   render(){
     const {data,prefix,suffix,placeholder,show,value} = this.props;
-    return <div className={style['container']}>
+    return <div className={style['container']} ref = {this.$cont}>
       {prefix}
       <div className={this.getClass()}
            onBlur={this.handleEditLabel}

src/components/SpreadDrop/index.jsx

@@ -56,7 +56,7 @@ class SpreadDrop extends Component{
     let boxLeft = e.pageX -175 + 'px';
     let offsetTop = e.target.offsetTop;
     const ht = e.target.offsetHeight;   //如杂音选中文字有多行时，写死会遮挡
-    let boxTop = offsetTop + ht + 'px';
+    let boxTop = offsetTop + ht +2 + 'px';
     this.setState({
       boxLeft:boxLeft,
       boxTop:boxTop
@@ -282,6 +282,11 @@ class SpreadDrop extends Component{
     });
   }
   getClass(){
+    if(this.props.show){
+      $(this.$div.current).addClass(style['borderd']);
+    }else{
+      $(this.$div.current).removeClass(style['borderd']);
+    }
     if(this.props.value){
       return style['selected-tag'];
     }

src/components/SpreadDrop/index.less

@@ -40,9 +40,6 @@
   cursor: pointer;
   line-height: 20px;
 }
-.tag{
-  .tag;
-}
 
 .selected-tag{
   padding: 0;