vue2在scss样式表中使用data数据

v_vszhao

于 2024-06-12 10:45:28 发布

阅读量196

点赞数 2

文章标签： scss 前端 javascript vue.js

本文链接：https://blog.csdn.net/v_vszhao/article/details/139620227

版权

vue2在scss样式表中使用data数据

<slider
                :style="styleObject"
                class="ipsec--limit--level"
                :default-value.sync="ruleForm.pay_by_volume_ipsec_connectionLimit"
                :mark="pay_by_volume_ipsec_mark"
                :showInput="true"
                :max="100"
                :min="1"
                :formate-value="formateValue"
                @change="ipsec_connectionLimit_change"
              ></slider>

data(){
return {
	ipsec_connectionLimit: '10%'
}
methods:{
ipsec_connectionLimit_change(val) {
      this.ruleForm.pay_by_volume_ipsec_connectionLimit = Math.floor(val)
      this.ipsec_connectionLimit = this.ruleForm.pay_by_volume_ipsec_connectionLimit == 1 ? '0%' : this.ruleForm.pay_by_volume_ipsec_connectionLimit + '%' //更改变量原值
      this.debounce(this.getPrice)
    },
}
},
computed:{
styleObject() {
      return {
        '--ipsec_connectionLimit': this.ipsec_connectionLimit //赋值变量
      }
    },
}

<style lang='scss'>
.ipsec--limit--level{
  /deep/ .el-slider__bar{
    width: var(--ipsec_connectionLimit) !important;
  }
  /deep/ .el-slider__button-wrapper{
    left: var(--ipsec_connectionLimit) !important;
  }
  }
</style>