vue2,style标签中引用data变量

需求:点击放大缩小按钮,动态改变el-form所有label和content部分的字体大小。

因为我们要修改的样式是el-form的子元素el-form-item的label和content的字体大小,要先给el-form绑定计算属性return一个变量A,再通过按钮动态改变字体大小。再style中通过通过var()关键字,使用--符号引用变量A。

javascript 复制代码
<div>
    <i class="el-icon-zoom-in" @click="zoomIn"></i>
    <i class="el-icon-zoom-out" @click="zoomOut"></i>
</div>
<div class="box1">
    <el-form ref="form" label-width="140px" label-position="left" :style="fontSizeVar">
                <el-form-item label="类型:">{{
                  curRow.type
                }}</el-form-item>
                <el-form-item label="位置:">{{
                  curRow.position
                }}</el-form-item>
    </el-form>
</div>


data(){
    return {
      fontSize :14
    }
},
computed:{
    fontSizeVar(){
      return {
        '--fontsize':this.fontSize + 'px'
      }
    },
}

methods:{
    zoomIn(){
        if(this.fontSize < 24){
            this.fontSize  += 2
          }
    },
    zoomOut(){
        if(this.fontSize > 14){
            this.fontSize -= 2
          }
    },
}

style样式:使用var调用data中的变量
       .box1{
          ::v-deep .el-form-item__label{
            font-size: var(--fontsize);
          }
          ::v-deep .el-form-item__content{
            font-size: var(--fontsize);
          }
          .el-button{
            font-size: var(--fontsize);
          }
        }
相关推荐
驭风少年君5 小时前
《搭建属于自己的网站之网页前端学习》基础入门
前端·学习
刘一说6 小时前
深入理解 Spring Boot 嵌入式 Web 容器:从原理到性能调优
前端·spring boot·firefox
你的人类朋友6 小时前
设计模式的原则有哪些?
前端·后端·设计模式
!执行7 小时前
Web3 前端与合约交互
前端·web3·1024程序员节
潘小安7 小时前
跟着 AI 学(二)- Quill 接入速通
前端
十里-7 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
shada7 小时前
从Google Chrome商店下载CRX文件
前端·chrome
左耳咚7 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
D_C_tyu8 小时前
Vue3 + Element Plus 实现前端手动分页
javascript·vue.js·elementui
黑云压城After8 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript