场景
【1】CMS模块化后台，编辑区动态修改滑杆数值预览区实时体现动态效果，下图举例

image.png

步骤：
【1】父元素或者本元素添加class="contentBorderRadiusCss" ref="contentBorderRadius"
【2】--radiusValue就是css变量值

//**************************内容圆角设置开始***************************
//动态全圆角
.contentBorderRadiusCss{
  //默认初始值
  --radiusValue:0rem;
  border-radius:var(--radiusValue)!important;
}
//**************************内容圆角设置结束***************************

【3】

  created() { 
    //内容圆角的初始值获取,contentBorderRadius是ref附在父级和同级都可以
    this.$nextTick(()=>{
      this.$refs.contentBorderRadius.style.setProperty("--radiusValue",this.contentBorderRadiusVal);
    })
  },

【4】计算

    //计算内容圆角的数值
    contentBorderRadiusVal(){
      let val=""
      if(this.temData.layout.tYjdx){
        val=`${this.temData.layout.tYjdx*0.01}rem`
      }else{
        val='0rem'
      }
      return val
    },

【5】监听实现动态实时改变

  //监听滑轮控件数值改变就改变CSS里面的变量值,contentBorderRadius是ref附在父级和同级都可以
  watch: {
    contentBorderRadiusVal(newObj, oldObj) {
      this.$refs.contentBorderRadius.style.setProperty("--radiusValue",newObj);
    }
  }