动态修改el-input样式，css变量形式外层修改input样式

相关文章推荐

善良的番茄 · 新手理解HTML、CSS、javascrip ...· 1 周前 ·

善良的番茄 · 零基礎也能懂的CSS - 概念篇| ...· 1 周前 ·

善良的番茄 · CSS Tutorial· 1 周前 ·

善良的番茄 · Google HTML/CSS代码风格指南· 1 周前 ·

善良的番茄 · html添加css样式的两种方法- 虚生- 博客园· 1 周前 ·

背景：正常我们在修改样式的时候，直接在样式表里写死，但是如果我们想要动态的修改样式，例如el-input字体颜色时，我们需要修改的实际是.el-input__inner这个样式的color，既然是动态，我们就不能在样式表里写死了，而是使用CSS变量修改。

一、CSS变量是什么？

1.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字体颜色
思路：给css引入一个变量--inputColor
/deep/ .el-input__inner {
  color: var(--inputColor); // 使用css变量，注意变量前需要加"--"
vue声明一个变量颜色colorVal, 例如: "#cccccc"
data() {
  return {
    colorVal: '#cccccc'
需要修改的地方，为--inputColor变量赋值
<el-input v-model="valueStr" :style="{'--inputColor': colorVal}"></el-input>
动态JS修改colorVal即可
this.colorVal = 'red'
需要注意：--inputColor是css变量，帮助引导的，colorVal才是设置的样式值
三、示例代码
<template>
    <el-input v-model="valueStr" :style="{ '--inputColor': colorVal}" @input="change1"></el-input>
</template>
<script>
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
</script>
<style lang="less" scoped>
/deep/ .el-input__inner {
  color: var(--inputColor); //使用css变量 注意变量前需要加 --
</style>