动态修改elmentUI元素样式

港控/mmm° 2022-10-12 01:37 298阅读 0赞

理论上也可用于其他组件库

这里以修改一个input框的文字颜色为例，正常我们要修改el-textarea__inner的值用以下写法即可

  1. /deep/ .el-textarea__inner
  2. { 
  3.   color: red
  5. }

思路就是将red引入为一个变量：

  1. /deep/ .el-textarea__inner
  2. { 
  3.   color: var(--textarea-color)
  5. }

我们在需要修改的地方，为--textarea-color变量赋值

  1. <el-input type="textarea" :rows="5" size="medium" placeholder="请输入内容" v-model="test.input" :style="{ '--textarea-color': test.color}">
  2. </el-input>

在js内修改color值就OK

  1. data (){ 
  2.     return { 
  3.         test: { 
  4.             input: '',
  5.             clolor: ''
  6.         }
  7.     }
  8. }

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，298人围观）

还没有评论，来说两句吧...

相关阅读