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

Question

​

我做了很多关于如何给占位符颜色的研究，但是找不到方法去做。我想给占位符颜色，在那里我需要接收颜色作为道具在Vue.js，以使其可重用的组件。

我知道如何用css.But改变颜色，但没有得到答案。

有些链接是-

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变量，即使伪元素不能直接样式化。