vue中动态修改css样式代码

问题描述:

一个脱离文档流的元素定位,要根据文档流中的特定元素的位置而改变,而该特定元素的位置又是不固定的,这个时候css代码就不能直接写,需求如下:
vue中动态修改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;
      }
    }
  1. data中写入toast_tips_style附加样式结构
data () {
    return {
      toast:false,
      //增加的附加样式,这里就是动态增加定位样式
      toast_tips_style:{
        left: ‘‘,
        top:‘‘
      },
 }
  1. 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,定位信息可以使用负数的方式去矫正定位。

vue中动态修改css样式代码

上一篇:Android面试抱佛脚:进程间通讯学习,从Binder使用看起


下一篇:vuecli2.x webpack3.x升级webpack5.37.0