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

This commit is contained in:
许红梅 2022-09-07 15:50:13 +08:00
parent 0c98e767d2
commit 2b3d681027
4 changed files with 68 additions and 19 deletions

View File

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

View File

@ -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>
)

View File

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

View File

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