el-input スタイルを動的に変更する; elmentUI 要素スタイルを動的に変更する; CSS 変数

シナリオ: 通常、:style と :class; を使用して div 要素のスタイルを動的に変更しますが、el-input のフォントの色など、要素のコンポーネントのスタイルを動的に変更したい場合は、el のスタイルが-input は深くネストされています。実際に変更する必要があるのは .el-input__inner スタイルの色ですが、このクラス名を HTML で取得することはできません。

解决办法：使用css变量修改

---

1. CSS変数とは何ですか?

1. CSS変数

CSS変数については、この記事を参照してください。

注: 1. 変数を宣言するときは、変数名の前に 2 つのハイフンを追加する必要があります。 –
2. 変数は var() 関数でラップされ、2 番目のパラメーターは変数のデフォルト値を示すために使用することもできます。 。変数が存在しない場合は、このデフォルト値が使用されます

次のコードでは、2 つの変数が宣言されています。--shadow、--size

div {
    
    
    font-size: var(--size, 18px);
    box-shadow: var(--shadow);
}

2. el-inputのフォントカラーを変更する

1. 元々は普通に文字色を変更していました

/deep/ .el-input__inner {
    
    
  color: red
}

2. el-inputのフォントカラーを動的に変更する

アイデア:
1. CSS に変数を導入する--inputColor

        /deep/ .el-input__inner {
    
    
          color: var(--inputColor); //使用css变量 注意变量前需要加 --
        }

colorVal2. Vue は#606266 などの変数カラーを宣言します。

data (){
    
    
	return {
    
    
		colorVal: '#606266',
	}
}

3. 変更が必要な場合は、--inputColor変数に値を代入します。

<el-input v-model="valueStr" :style="{ '--inputColor': colorVal}"></el-input>

4. 動的jsは変更colorVal可能

this.colorVal = 'red'

注意が必要です:--inputColorこれは CSS 変数であり、ガイドに役立ち、colorVal設定されたスタイル値です

3、以下代码可直接复制

<template>
  <div>
    <el-input v-model="valueStr" :style="{ '--inputColor': colorVal}" @input="change1"></el-input>
  </div>
</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>

---

要約する

其他的组件或者组件库，动态修改样式，同样道理