vue中动态修改css样式代码

问题描述：

一个脱离文档流的元素定位，要根据文档流中的特定元素的位置而改变，而该特定元素的位置又是不固定的，这个时候css代码就不能直接写，需求如下：

解决方案：

1. 先给弹窗写基础样式，定位信息可以不写

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

2. data中写入toast_tips_style附加样式结构

 data () {
    return {
      toast:false,
      //增加的附加样式，这里就是动态增加定位样式
      toast_tips_style:{
        left: '',
        top:''
      },
 }

3. 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，定位信息可以使用负数的方式去矫正定位。