动态修改elmentUI元素样式

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

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

/deep/ .el-textarea__inner
{
  color: red

}

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

/deep/ .el-textarea__inner
{
  color: var(--textarea-color)

}

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

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

在js内修改color值就OK

data (){
	return {
		test: {
			input: '',
			clolor: ''
		}
	}
}