如何通过接受颜色作为 vue js 中的道具来为占位符提供颜色？答案

【问题标题】：How to give color to placeholder by accepting color as props in vue js?如何通过接受颜色作为 vue js 中的道具来为占位符提供颜色？
【发布时间】：2020-03-24 19:42:01
【问题描述】：

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

我知道如何使用 css 更改颜色。但是在 vuejs 中没有得到答案。

有些链接是 -

How to update placeholder color using Javascript?

How to change the colour of placeholder using javascript?

【问题讨论】：

您使链接无法点击 - 为什么？ to make it reusable component - 展示你的组件
是的，现在可以点击链接了。 @Bravo，我添加了我的表单组件
我找到了如何使用 js 做到这一点，但无法在 vue 中实现。常量 {sheet} = Object.assign(document.head.appendChild(document.createElement("style")), {type: "text/css" }); const placeholderStyle = sheet.rules[sheet.insertRule("::placeholder {}")].style; placeholderStyle.color = "黄色";
I have added my form component - 这是它的照片
那你需要什么？你想让我把所有的代码都贴在这里还是什么？

标签： javascript html vue.js

【解决方案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 变量，即使不能直接设置伪元素的样式。

【讨论】：

该输入字段有很多其他样式，那么我如何添加所有样式，因为我无法再次绑定样式。请检查我上面的表格并相应地建议是否可能。谢谢
@Dcoder 您只需将额外的属性添加到styles 对象，或styles 字符串视情况而定。假设它来自计算属性，将它添加到该计算属性中应该很简单。例如如果它是一个对象，那么在您返回 styles 之前某个地方是 styles['--placeholder-color'] = this.placeholderColor。替代方法包括使用扩展运算符：:style="{...styles, '--placeholder-color': placeholderColor}"，但这确实没有必要。
styles 是我在计算属性中定义的一个函数，但它不起作用。下面的代码有 - styles(){ return{ 'font-size': this.size, 'font-family': this.font, color: this.color, '--placeholder-color': this.pcolor, }
还有类似 - :style="{...styles, '--placeholder-color': pcolor}" 但还是不行。
@Dcoder 您的计算属性似乎是正确的。将问题分解为多个阶段。如果您检查开发人员工具中的相关元素，您应该能够看到生成的 style 属性，以确认正在设置 --placeholder-color。如果变量设置正确，则表明问题出在使用该变量的 CSS 中。确保你理解了我的例子。这不仅仅是设置--placeholder-color 的问题，您还必须包含一些针对输入::placeholder 的合适CSS 来告诉它使用该变量。