Question

我正在尝试在占位符中插入跨度，以进行颜色更改。但是占位符只返回字符串，是否可以解决该问题？

computed: {
      customPlaceholder () {
        let numLength = this.options.length;
        return this.placeholder + "<span>"+numLength+"</span>"
      }
}

Answer 1

我认为您正在尝试在input字段中添加自定义占位符。

要执行此操作，您需要混合使用css和html。

new Vue({
  el: '#editor',
  data: {
    input: '',
    input2: 'some text'
  },
  computed: {
    placeholderText: function () {
      return `${this.input2} <span>*</span>`
    }
  },
  methods: {
    update: _.debounce(function (e) {
      this.input = e.target.value
    }, 300)
  }
})

#editor div {
  display: inline-block;
}



.input-placeholder {
  position: relative;
}
.input-placeholder input {
  padding: 10px;
  font-size: 25px;
}
.input-placeholder input:valid + .placeholder {
  display: none;
}

.placeholder {
  position: absolute;
  pointer-events: none;
  top: 0;
  bottom: 0;
  height: 25px;
  font-size: 25px;
  left: 10px;
  margin: auto;
  color: #ccc;
}

.placeholder span {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/lodash@4.16.0"></script>

<div id="editor">
  <div class="input-placeholder">
    <input type="text" @input="update">
    <div class="placeholder" v-if="!input" v-html="placeholderText">
      Email <span>*</span>
    </div>
  </div>
</div>

我已经为此解决方案创建了此jsfiddle。

Answer 2

您可以使用CSS占位符选择器

input::-webkit-input-placeholder { /* Edge */
  color: green!important;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: green!important;
}

input::placeholder {
  color: green!important;
}

尝试一下，然后尝试删除!important。

但是缺少信息。您是否要动态更改颜色？还是要在同一占位符中使用不同的颜色？

Vue-multiselect-如何在占位符中插入HTML代码？

2 个答案: