烟台网站建设哪家专业,哈尔滨企业建站,wordpress论坛版块,开发软件场景#xff1a;正常我们动态修改div元素的样式#xff0c;使用:style和:class即可#xff1b;但是我们想要动态修改element的组件样式时候#xff0c;例如el-input字体颜色#xff0c;由于el-input的样式嵌套很深#xff0c;我们需要修改的实际是.el-input__inner这个样… 场景正常我们动态修改div元素的样式使用:style和:class即可但是我们想要动态修改element的组件样式时候例如el-input字体颜色由于el-input的样式嵌套很深我们需要修改的实际是.el-input__inner这个样式的color但是我们在html又没法拿到这个类名。 解决办法使用css变量修改 一、css变量是什么
1.css变量
css变量具体可以看这篇 注意1.声明变量的时候变量名前面要加两根连词线 – 2.变量使用var() 函数包裹还可以使用第二个参数表示变量的默认值。如果变量不存在就会使用这个默认值 以下代码中声明了两个变量: --shadow、--size
div {font-size: var(--size, 18px);box-shadow: var(--shadow);
}二、修改el-input字体颜色
1.原先正常修改字体颜色
/deep/ .el-input__inner {color: red
}2.动态修改el-input字体颜色 思路 1.给css引入一个变量--inputColor /deep/ .el-input__inner {color: var(--inputColor); //使用css变量 注意变量前需要加 --}2.vue声明一个变量颜色colorVal 例如 #606266 data (){return {colorVal: #606266,}
} 3.需要修改的地方为--inputColor变量赋值 el-input v-modelvalueStr :style{ --inputColor: colorVal}/el-input4.动态js修改colorVal即可 this.colorVal red需要注意--inputColor是css变量帮助引导的colorVal才是设置的样式值
3、以下代码可直接复制
templatedivel-input v-modelvalueStr :style{ --inputColor: colorVal} inputchange1/el-input/div
/templatescript
export default {data () {return {valueStr: ,colorVal: #606266,}},created () {},methods: {change1 () {var r Math.floor(Math.random() * 256)var g Math.floor(Math.random() * 256)var b Math.floor(Math.random() * 256)// 设置随机色var color # r.toString(16) g.toString(16) b.toString(16)this.colorVal color},},
}
/scriptstyle langless scoped
/deep/ .el-input__inner {color: var(--inputColor); //使用css变量 注意变量前需要加 --
}
/style总结
其他的组件或者组件库动态修改样式同样道理
