问题描述:
一个脱离文档流的元素定位,要根据文档流中的特定元素的位置而改变,而该特定元素的位置又是不固定的,这个时候css代码就不能直接写,需求如下:
解决方案:
- 先给弹窗写基础样式,定位信息可以不写
toast_tips 表示该元素的基础样式,写在css中,toast_tips_style表示附加样式,需要在js中动态写入
<div v-show="toast" class='toast_tips' :style="toast_tips_style" @click="hideToast">
<p>xxxxxxxx</p>
</div>
.toast_tips{
position: absolute;
width:5.12rem;
height:1.44rem;
display: flex;
flex-direction: column;
align-items: left;
padding-top: 0.4rem;
padding-left: 0.213333rem;
background: url('../../../static/images/partner/freeze.png') no-repeat center/100%;
>p{
font-size:0.32rem;
font-family:PingFangSC;
font-weight:400;
color:rgba(51,51,51,1);
line-height:16px;
}
}
- data中写入toast_tips_style附加样式结构
data () {
return {
toast:false,
//增加的附加样式,这里就是动态增加定位样式
toast_tips_style:{
left: '',
top:''
},
}
- js中给toast_tips_style动态样式设置数据
找到定位元素的参照物,利用 this.$refs获取参考元素rt_dom和目标元素faq_dom的dom节点,找到参考元素的定位信息
根据参考元素和目标元素的位置关系,动态设置目标元素的位置信息
div class="rt" ref="rt_dom">
<span ref="faq_dom" class="faq" @click="show_toast"></span>
show_toast:function(event){
this.toast = true;
//获取当前屏幕宽度px
var screen_width = document.body.clientWidth;
var el = event.currentTarget;
var rt_dom = this.$refs.rt_dom.offsetHeight;
var faq_dom = this.$refs.faq_dom.offsetLeft;
//计算出的定位信息px转rem
this.toast_tips_style.left=(faq_dom-145)*10/screen_width+'rem'
this.toast_tips_style.top=(rt_dom-8)*10/screen_width+'rem'
},
PS:如果你不想js中去写css代码,你也可以用一个相对位置的div去包含一个绝对位置的div,定位信息可以使用负数的方式去矫正定位。