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

Question

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

我知道如何使用 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 变量。