如何通过在Vue JS中接受颜色作为道具来为占位符赋予颜色？

Question

我做了很多有关如何为占位符赋予颜色的研究，但是找不到找到这种方法的方法。我想为占位符提供颜色，在Vue.js中我需要接收颜色作为道具以使其成为可重用的组件。

我知道如何使用CSS更改颜色。但是无法在vuejs中得到答案。

一些链接是-

How to update placeholder color using Javascript?

How to change the colour of placeholder using javascript?

Answer 1

这是使用CSS变量的一种方法：

const MyInput = {
  template: `
    <input
      class="my-input"
      placeholder="Placeholder"
      :style="placeholderColor ? {'--placeholder-color': placeholderColor} : {}"
    >
  `,
  
  props: ['placeholder-color']
}

new Vue({
  el: '#app',
  
  components: {
    MyInput
  },
  
  data () {
    return {
      colors: ['#f00', '#0f0', '#00f']
    }
  },
  
  methods: {
    rotate () {
      this.colors.push(this.colors.shift())
    }
  }
})

.my-input {
  --placeholder-color: #f0f;
}

.my-input::placeholder {
  color: var(--placeholder-color);
}

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>

<div id="app">
  <my-input v-for="color in colors" :placeholder-color="color"></my-input>
  <br>
  <button @click="rotate">Rotate</button>
  <br>
  <my-input></my-input>
</div>

诀窍在于，即使无法直接设置伪元素的样式，也可以使用style来设置CSS变量。