场景
【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);
}
}
