编辑器删除：计算div最顶边距离浏览器的位置，控制删除框定位

src/assets/comm.css

@@ -197,4 +197,8 @@ input {
 
 .big {
   font-size: 16px;
-}
+}
+.del-color{
+  color: #f00;
+  cursor: pointer;
+}

src/pages/exchangepage/edittemplate/goodstemplate.js

@@ -7,26 +7,41 @@ import BottomBarView from './couponConfig/bottomBar' //底部栏
 export default class edittemplate extends React.Component {
   constructor(props) {
     super(props)
+    this.state={
+      clientY:0,
+      selectDom:'searchBar'
+    }
   }
   opendescFn() {
     this.props.opendesc(true)
   }
+  customComponent(e,name){
+    //getBoundingClientRect().top ;获取div最顶边距离浏览器的位置
+    let b=this.refs[name];
+    let offset_top=this.refs[name].getBoundingClientRect().top;
+    console.log(22,offset_top);
+    this.setState({clientY:(offset_top-125),selectDom:name});
+    if(name=='bottomBar'){
+      this.setState({clientY:600,selectDom:name});
+    }
+  }
   render() {
     let goodsConfig=this.props.goodsdata;
     return (
       <div className="editor-main goodstemplate"  style={{ background:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgImg? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover`:'#F2F7F8' }}>
         {
-         goodsConfig.search?<SearchBarView searchConfig={goodsConfig.search}/>:null
+         goodsConfig.search?
+         <div onClick={e=>this.customComponent(e,'searchBar')} className={this.state.selectDom=='searchBar'?'selectBorder':''} ref="searchBar"><SearchBarView searchConfig={goodsConfig.search} /></div>:null
         }
         <img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" />
         {
           !goodsConfig.top_image ? <img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'} /> : <img className="topbanner" src={goodsConfig.top_image} />
         }
          {
-          goodsConfig.picture? <img src={goodsConfig.picture.img} alt="" className="picture"/>:null
+          goodsConfig.picture? <div  onClick={e=>this.customComponent(e,'picBar')} ref="picBar"  className={this.state.selectDom=='picBar'?'selectBorder':''}><img src={goodsConfig.picture.img} alt="" className="picture"/></div>:null
         }
         {
-          goodsConfig.title?<div  className={goodsConfig.title.textAlign +'  content-title  '+goodsConfig.title.fontSize} style={{color:goodsConfig.title.fontColor}}>{goodsConfig.title.text}</div>:null
+          goodsConfig.title?<div  onClick={e=>this.customComponent(e,'title')} ref="title" className={this.state.selectDom=='title'?'selectBorder':''}><div  className={goodsConfig.title.textAlign +'  content-title  '+goodsConfig.title.fontSize} style={{color:goodsConfig.title.fontColor}}>{goodsConfig.title.text}</div></div>:null
         }
         {
           goodsConfig.list == 2 ? <img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'} /> : goodsConfig.list == 3 ? <img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'} /> : <img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'} />
@@ -41,13 +56,13 @@ export default class edittemplate extends React.Component {
           goodsConfig.describe.type == 2 ? <img className="susactive_tip" onClick={this.opendescFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'} /> : null
         }
         {
-          goodsConfig.bottomBar? <BottomBarView bottomBarConfig={goodsConfig.bottomBar}/>:null
+          goodsConfig.bottomBar? <div  ref="bottomBar" onClick={e=>this.customComponent(e,'bottomBar')} className={this.state.selectDom=='bottomBar'?'selectBottomBorder':''}><BottomBarView bottomBarConfig={goodsConfig.bottomBar}/></div>:null
          
         }
-        <div className="delete-component">
-         <span>搜索</span>
+        <div className="delete-component" style={{top:this.state.clientY}}>
+         <i className="marketing marketing-beijingtupian"></i>
          <b className="split">|</b>
-         <i className="marketing marketing-fuwenbenkuang"></i>
+         <span className="del-color">删除</span>
         </div>
       </div>
     )

src/pages/exchangepage/edittemplate/goodstemplate.less

@@ -37,7 +37,9 @@
     position: relative;
     margin-top: -50px;
   }
-
+  >.goodsPic{
+    margin-top: 8px;
+  }
   >.goodsPicMatrax {
     height: auto;
   }
@@ -86,16 +88,16 @@
   .delete-component {
     display: flex;
     position: absolute;
-    top: 193.2px;
-    right: -5px;
+    top: 0;
+    right: -10px;
     -ms-flex-align: center;
     align-items: center;
     padding: 6px 8px;
     border-radius: 2px;
     background: #fff;
     font-size: 14px;
-    -webkit-transform: translate3d(100%, 64px, 0);
-    transform: translate3d(100%, 64px, 0);
+    -webkit-transform: translateX(73px);
+    transform: translateX(70px);
     &:before{
       position: absolute;
       left: 0;
@@ -109,11 +111,39 @@
     }
     .split{
       padding: 0 5px;
+      color: #b4b8b4;
     }
   }
+  .fixbottom{
+    bottom: 0!important;
+  }
 }
 
 .goodstemplate {
+  
+.selectBorder {
+  z-index: 2;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border: 2px solid #1985ff;
+  width: 100%;
+  height: auto;
+  background: rgba(25,133,255,.2);
+  content: "";
+}
+.selectBottomBorder {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 2;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  border: 2px solid #1985ff;
+  width: 100%;
+  height: 54px;
+  background: rgba(25,133,255,.2);
+  content: "";
+}
   .bottomactiveTip {
     width: 350px;
     margin: 12.5px;
@@ -125,8 +155,7 @@
 
   .searchBar {
     width: 80%;
-    margin-left: 10%;
-    margin-top: 2%;
+    margin: 2% 10%;
     height: 40px;
     line-height: 40px;
     padding-left: 15px;

src/pages/exchangepage/edittemplate/main.less

@@ -14,7 +14,7 @@
 	right: 0;
 }
 .xj-center-small{
-	margin: 0 448px 0 490px;
+	margin: 0 430px 0 470px;
 }
 .perimg {
 	position: absolute;
@@ -155,7 +155,7 @@
 	overflow-y: auto;
 	position: absolute;
 	right: 0;
-	width: 450px;
+	width: 440px;
 	.zent-image-upload-item-delete[data-zv="9.11.0"] {
 		display: block;
 		top: -15px;
@@ -718,8 +718,9 @@
 		width: 30px !important;
 		height: 13px !important;
 		position: absolute;
-		top: 32px;
-		right: 10px;
+		top: 20px;
+		right: 7px;
+		border-radius: 7px;
 	}
 }