动态修改组件样式

1、问题：

正常情况下：动态修改普通布局的样式，只需要用:style和:class即可
特殊情况下：我们需要动态修改组件的样式，我们需要怎么做呢

2、解决：

解决方案：使用css变量进行修改

3、css变量

①声明变量

变量名前面要加两根连词线 --
变量名前面加连线的原因：避免冲突

②使用变量

var() 函数用于读取变量
var() 函数还可以使用第二个参数，表示变量的默认值。如果变量不存在，就会使用这个默认值
下面示例就是先声明，后使用,p的颜色就是#ff5722 

<template>
  <div class="app">
    <p>测试</p>
  </div>
</template>

<script></script>

<style lang="less" scoped>
.app {
  --color: #ff5722;

  p {
    color: var(--color);
  }
}
</style>

4、需求

随着输入，动态修改input框的字体颜色
思路
1、通过:style声明css变量，并绑定js中的变量

:style="{ '--inputColor': colorVal }"

2、通过js修改绑定的变量值

 this.colorVal = '#' + r.toString(16) + g.toString(16) + b.toString(16)

方案

<template>
  <div class="app">
    <van-field v-model="value" @input="change" :style="{ '--inputColor': colorVal }" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      value: '',
      colorVal: '#606266'
    }
  },
  methods: {
    change () {
      let r = Math.floor(Math.random() * 256)
      let g = Math.floor(Math.random() * 256)
      let b = Math.floor(Math.random() * 256)
      // 把0~256的随机数换成16进制
      this.colorVal = '#' + r.toString(16) + g.toString(16) + b.toString(16)
    }
  }
}

</script>

<style lang="less" scoped>
.app {
  .van-cell {
    width: 60%;
    border: 1px solid #999999;

    /deep/ .van-field__control {
      color: var(--inputColor);
    }
  }
}
</style>